React Native set Padding dynamically on text component on button click

Padding is used to set space around text component’s content inside defined border or block. By default we can set padding using Style’s padding property, but in this tutorial we would going to set Padding dynamically on text component on button click in both Android and iOS devices in react native application.

Contents in this project set Padding dynamically on text component on button click:

1. Add StyleSheet, View, Button and Text component in your project.

2. Create a State named as Text_Padding in constructor(). We would use this State to set padding on Text component.

2. Create a function named as Set_Padding(). We would call this function on button onPress event and update the State value.

3. Create a Root View in render’s return block

4. Create 1 Text component and 1 Button component in root view. We would call the padding property of style on Text using style array method. So when the State value update it will programmatically update the padding value at application run time.

5. Create Style.

6. Complete source code for App.js File :

Screenshot in Android device :

set Padding dynamically on text component on button clickScreenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *