{"id":28383725,"url":"https://github.com/pierrecapo/react-native-animated-button-textinput","last_synced_at":"2025-06-25T14:30:40.497Z","repository":{"id":57335328,"uuid":"184498150","full_name":"PierreCapo/react-native-animated-button-textinput","owner":"PierreCapo","description":"A button converted to TextInput when pressed for react-native","archived":false,"fork":false,"pushed_at":"2019-05-02T20:52:56.000Z","size":12,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-24T14:38:43.294Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PierreCapo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-02T00:11:48.000Z","updated_at":"2022-04-08T17:57:41.000Z","dependencies_parsed_at":"2022-09-06T07:44:13.933Z","dependency_job_id":null,"html_url":"https://github.com/PierreCapo/react-native-animated-button-textinput","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-animated-button-textinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-animated-button-textinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-animated-button-textinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-animated-button-textinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PierreCapo","download_url":"https://codeload.github.com/PierreCapo/react-native-animated-button-textinput/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-animated-button-textinput/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258361663,"owners_count":22688788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-30T07:12:00.013Z","updated_at":"2025-06-25T14:30:40.486Z","avatar_url":"https://github.com/PierreCapo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-animated-button-textinput\n\nA react-native component for animating button to text-input\n\n\u003cp style=\"text-align:center;\"\u003e\n\u003cimg src=\"https://imgur.com/U0RwpJj.gif\"/\u003e\n\u003c/p\u003e\n\n### Install\n\n```bash\nnpm install react-native-animated-button-textinput;\n```\n\nand then in your code :\n\n```js\nimport { AnimatedButtonTextInput } from \"react-native-animated-button-textinput\";\n```\n\nAnd then :\n\n```jsx\n\u003cAnimatedButtonTextInput\n  rightButtonContent={() =\u003e (\n    \u003cText style={{ fontWeight: \"bold\", color: \"white\" }}\u003eSend\u003c/Text\u003e\n  )}\n  rightButtonProps={{\n    style: {\n      backgroundColor: \"green\",\n      height: 32,\n      paddingHorizontal: 10,\n      borderRadius: 20,\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      marginRight: 4\n    }\n  }}\n  collapsedContent={() =\u003e \u003cText\u003eSend\u003c/Text\u003e}\n  onExpandedPress={() =\u003e console.log(\"hello world\")}\n  textInputProps={{\n    onChangeText: text =\u003e console.log(text)\n  }}\n/\u003e\n```\n\n### API\n\nThis 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.\n\nNote :\n\n- **Collapsed** means when the component is in \"button only\" mode\n- **Expanded** means when the component is in \"text input\" mode\n\n| Props name           | Type                  | Description                                                    |\n| -------------------- | --------------------- | -------------------------------------------------------------- |\n| `animationDuration`  | number                | Duration of the animations                                     |\n| `collapsedWidth`     | number                | Width of the button when collapsed                             |\n| `collapsedHeight`    | number                | Height of the button when collapsed                            |\n| `expandedWidth`      | number                | Width of the button when expanded                              |\n| `expandedHeight`     | number                | Height of the button when expanded                             |\n| `collapsedContent`   | () =\u003e React.ReactNode | Content inside the button when collapsed                       |\n| `collapsedProps`     | ViewProps             | Props of Touchable when collapsed                              |\n| `rightButtonContent` | () =\u003e React.ReactNode | Content inside the right button when expanded                  |\n| `rightButtonProps`   | TouchableOpacityProps | Props of the right button when expanded                        |\n| `textInputProps`     | TextInputProps        | Props of the left text input when expanded                     |\n| `componentProps`     | ViewProps             | Props of the component shared between collaspsed and expanded  |\n| `onCollapsedPress`   | () =\u003e void            | Function called when the button is pressed when collapsed      |\n| `onExpandedPress`    | () =\u003e void            | Function called when the right button is pressed when expanded |\n\n### Credits\n\nThanks to Jason Brown for providing the idea of this component\n\n### Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierrecapo%2Freact-native-animated-button-textinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierrecapo%2Freact-native-animated-button-textinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierrecapo%2Freact-native-animated-button-textinput/lists"}