https://github.com/pierrecapo/react-native-animated-button-textinput
A button converted to TextInput when pressed for react-native
https://github.com/pierrecapo/react-native-animated-button-textinput
Last synced: 12 months ago
JSON representation
A button converted to TextInput when pressed for react-native
- Host: GitHub
- URL: https://github.com/pierrecapo/react-native-animated-button-textinput
- Owner: PierreCapo
- Created: 2019-05-02T00:11:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-02T20:52:56.000Z (about 7 years ago)
- Last Synced: 2025-05-24T14:38:43.294Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 11.7 KB
- Stars: 5
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-animated-button-textinput
A react-native component for animating button to text-input
### Install
```bash
npm install react-native-animated-button-textinput;
```
and then in your code :
```js
import { AnimatedButtonTextInput } from "react-native-animated-button-textinput";
```
And then :
```jsx
(
Send
)}
rightButtonProps={{
style: {
backgroundColor: "green",
height: 32,
paddingHorizontal: 10,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
marginRight: 4
}
}}
collapsedContent={() => Send}
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