React-native-animated-button-textinput NPM

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

tslib

@infinitebrahmanuniverse/nolb-react-native-an @everything-registry/sub-chunk-2570

6 years ago

6 years ago

6 years ago

6 years ago