Transition for TextInput width in React Native Expo app using Tailwind/NativeWind

Question

In a React Native Expo app, there is a TextInput whose width can change due to having the Tailwind/Nativewind className="flex-grow when the Pressable component gets hidden.

Is there a way to animate the change in width of the TextInput component so that the change occurs over some time instead of abruptly?

Used the transition-all class on the TextInput component but it does not provide the transition animation.

import {
  Pressable,
  TextInput,
} from "react-native";

export default MyScreen() {

  const hideComponent = () => { ... }

  return (
    <View className="flex flex-row ....">
      <TextInput className="flex-grow transition-all ..."/>
      <Pressable onPress={hideComponent}>
        <Something />
      </AnimatedPressable>
    </View>
  )
}

score 0 · Answer 1 · answered Apr 10 '23 at 03:59

Use the magic of State here

const [focus, setFocus] = useState(false);
  const CustomStyle = focus ? styles.TextInputFocus : styles.textField;

And use the Inbuild ,onFocus and onBlur Property of TextInput as

 <TextInput
          style={CustomStyle}
          label="Mobile number or email"
          value={mail}
          mode="outlined"
          onChangeText={(mail) => setMail(mail)}
          theme={{
            colors: {
              placeholder: "white",
              text: "white",
              primary: "white",
              backgroundColor: "transparent",
            },
          }}
          onFocus={() => setFocus(true)}
          onTextInput={() => setFocus(false)}
        />

Then define Some styles for both the Objects inside the stylesheet as you wish

const styles = StyleSheet.create({
  textField: {
   // borderRadius: 10,
   // fontSize: 17,
   // color: "#E2DED0",
   // backgroundColor: "#647C90",
   // borderColor: "#E2DED0",
   // padding: 10,
  },
  TextInputFocus: {
   // paddingTop: 10,
   // paddingBottom: 10,
   // borderColor: "white",
   // backgroundColor: "#647C90",
   // borderRadius: 10,
   // fontSize: 18,
  },
});

Instead of using Inbuild Stylesheet styles ,use Tailwind. These are the steps .I hope You will find it useful.

Transition for TextInput width in React Native Expo app using Tailwind/NativeWind

1 Answers1