如何在 React Native 中创建具有模糊背景的 TextInput

Question

我在 React Native 中设置 TextInput 块样式时遇到问题

我的目标是具有相同模糊效果背景+模糊的输入

现在我的代码是：

<View style={styles.controll}>
 <View style={styles.inputWrapper}>
    <BlurView intensity={10}>
       <TextInput style={styles.emailInput} />
    </BlurView>
 </View>
 <View style={styles.inputWrapper}>
    <BlurView intensity={10}>
        <TextInput style={styles.passInput} />
    </BlurView>
 </View>
</View>

我正在使用 Expo 组件 BlurView import { BlurView } from "expo-blur";

设计代码是

background: rgba(20, 15, 38, 0.648579);
backdrop-filter: blur(44.119px);
border-radius: 20px

我的风格看起来像：

const styles = StyleSheet.create({
  inputWrapper: {
    width: "100%",
    height: 75,
    backgroundColor: "rgba(20, 15, 38, 0.648579)",
    filter: "blur(44.119)",
    borderRadius: 20,
    position: "relative",
    overflow: "hidden",
    marginBottom: 25
  },

  emailInput: {
    height: "100%",
    backgroundColor: "transparent"
  },
  controll: {
    flex: 2,
    width: "100%",
    flexDirection: "column",
    justifyContent: "flex-end",
    alignItems: "center"
    // backgroundColor: "red"
  },

});

应该添加哪些样式或库才能达到预期的效果？谢谢！