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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Text} from ‘react-native’;
|
2. Create a State named as Text_Padding in constructor(). We would use this State to set padding on Text component.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor(){
super();
this.state={
//default padding.
Text_Padding : 1,
}
}
|
2. Create a function named as Set_Padding(). We would call this function on button onPress event and update the State value.
|
1
2
3
4
5
6
7
8
9
|
Set_Padding=()=>{
this.setState({
Text_Padding : 20
})
}
|
3. Create a Root View in render’s return block
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={ [ styles.TextStyle, { padding: this.state.Text_Padding } ] }> ReactNativeCode.com </Text>
<Button title=‘Change Text Component Padding Dynamically on Button Click’ onPress={this.Set_Padding} />
</View>
);
}
|
5. Create Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
},
TextStyle:{
marginBottom: 10,
color: ‘#000’,
borderWidth: 1,
borderColor: ‘#F44336’
}
|
6. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Text} from ‘react-native’;
export default class Mynewproject extends Component {
constructor(){
super();
this.state={
//default padding.
Text_Padding : 1,
}
}
Set_Padding=()=>{
this.setState({
Text_Padding : 20
})
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={ [ styles.TextStyle, { padding: this.state.Text_Padding } ] }> ReactNativeCode.com </Text>
<Button title=‘Change Text Component Padding Dynamically on Button Click’ onPress={this.Set_Padding} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
},
TextStyle:{
marginBottom: 10,
color: ‘#000’,
borderWidth: 1,
borderColor: ‘#F44336’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
Add border to Image in React Native using custom style sheet
React Native Auto Scale Image Width Height Dimension Example Tutorial
React Native Create Rounded Corners Button Android iOS Tutorial
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native KeyboardAvoidingView with TextInput Example Tutorial
