Как создать TextInput с размытым фоном в React Native - PullRequest
Новая
       124

Как создать TextInput с размытым фоном в React Native

0 голосов
/ 03 мая 2020

У меня проблема со стилизацией блока TextInput в React Native

Моя цель - ввод с тем же эффектом размытия фона + размытие

how TextInput should look

Теперь мой код: 

<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 для импорта {BlurView} из "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"
  },

});

Какие стили или библиотеки следует добавить для достижения желаемого эффекта? Спасибо!

...