React Native Change Text Component Height Width Dynamically

The Text component dose supports run time Height and Width updating feature using States. So in this tutorial we would going to create a react native app with set Change Text Component Height Width Dynamically on button click in react native android iOS application using Sates. We would simply call a function on button click and update the State values and according to them the height and width should be updated programmatically.

Contents in this example Change Text Component Height Width Dynamically on button click in React Native :

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

2. Create constructor() in your project. Now we would make 2 States named as Text_Height and Text_Width and set the default height and width is 100 * 100.

3. Create a function named as Change_Height_Width(). Inside this function we would simply update the States value to 120 * 200. We would call this function on button click event.

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

5. Create a Text component in Root View. Now using the Style Array method we would call custom style class and its attribute dynamically. The width and height here is coming form States.

6. Create a Button component in Root view and call the Change_Height_Width() function on button onPress={} event.

7. Create Styles.

8. Complete source code for App.js File :

Screenshot in Android device :

Screenshot in iOS device :