react-native-animated-button-textinput

A react-native component for animating button to text-input

Install

npm install react-native-animated-button-textinput;

and then in your code :

import { AnimatedButtonTextInput } from "react-native-animated-button-textinput";

And then :

<AnimatedButtonTextInput
  rightButtonContent={() => (
    <Text style={{ fontWeight: "bold", color: "white" }}>Send</Text>
  )}
  rightButtonProps={{
    style: {
      backgroundColor: "green",
      height: 32,
      paddingHorizontal: 10,
      borderRadius: 20,
      justifyContent: "center",
      alignItems: "center",
      marginRight: 4
    }
  }}
  collapsedContent={() => <Text>Send</Text>}
  onExpandedPress={() => console.log("hello world")}
  textInputProps={{
    onChangeText: text => console.log(text)
  }}
/>

API

This component doesn't use native drivers for animationns since it anitmates width and height which is not supported by native drivers in react-native right now.

Note :

• Collapsed means when the component is in "button only" mode
• Expanded means when the component is in "text input" mode

| Props name | Type | Description | | -------------------- | --------------------- | -------------------------------------------------------------- | | animationDuration | number | Duration of the animations | | collapsedWidth | number | Width of the button when collapsed | | collapsedHeight | number | Height of the button when collapsed | | expandedWidth | number | Width of the button when expanded | | expandedHeight | number | Height of the button when expanded | | collapsedContent | () => React.ReactNode | Content inside the button when collapsed | | collapsedProps | ViewProps | Props of Touchable when collapsed | | rightButtonContent | () => React.ReactNode | Content inside the right button when expanded | | rightButtonProps | TouchableOpacityProps | Props of the right button when expanded | | textInputProps | TextInputProps | Props of the left text input when expanded | | componentProps | ViewProps | Props of the component shared between collaspsed and expanded | | onCollapsedPress | () => void | Function called when the button is pressed when collapsed | | onExpandedPress | () => void | Function called when the right button is pressed when expanded |

Credits

Thanks to Jason Brown for providing the idea of this component

Licence

MIT