The ScrollView widget in react native has a prop named as showsVerticalScrollIndicator={} which supports Boolean values. If user pass False in showsVerticalScrollIndicator then it will disable the ScrollIndicator. So in this tutorial we would React Native Disable Hide ScrollBar ScrollIndicator in ScrollView Android iOS Example Tutorial.
Contents in this project Hide ScrollBar ScrollIndicator in ScrollView in React Native Android iOS Example Tutorial:
1. Open your project’s main App.js file and import StyleSheet, ScrollView, Text, Image and View component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
|
2. Create our main Root class named as App extends Component. This is our main export default class.
|
1
2
3
4
5
|
export default class App extends Component {
}
|
3. Creating render’s return block in main class. Now we would make ScrollView component. We would use showsVerticalScrollIndicator={false} prop to disable the Scroll bar in scroll view component. This prop would disable the scroll indicator but the scrolling works perfectly.
|
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
|
render() {
return (
<ScrollView
showsVerticalScrollIndicator={false}>
<View style={styles.MainContainer}>
<Text style={{fontSize:30, textAlign: ‘center’}} >Scroll View Starts from Here.</Text>
<Image source={{uri : ‘/wp-content/uploads/2017/06/sample_image.png’}}
style = {styles.imageStyle} />
<Image source={{uri : ‘/wp-content/uploads/2017/06/sample_image_new.png’}}
style = {styles.imageStyle} />
<Image source={{ uri: ‘/wp-content/uploads/2018/02/motorcycle.jpg’ }}
style={styles.imageStyle} />
<Text style={{fontSize:30, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</View>
</ScrollView>
);
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
imageStyle : {
width: 200,
height: 200,
resizeMode: ‘contain’,
margin: 5
}
});
|
5. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
export default class App extends Component {
render() {
return (
<ScrollView
showsVerticalScrollIndicator={false}>
<View style={styles.MainContainer}>
<Text style={{fontSize:30, textAlign: ‘center’}} >Scroll View Starts from Here.</Text>
<Image source={{uri : ‘/wp-content/uploads/2017/06/sample_image.png’}}
style = {styles.imageStyle} />
<Image source={{uri : ‘/wp-content/uploads/2017/06/sample_image_new.png’}}
style = {styles.imageStyle} />
<Image source={{ uri: ‘/wp-content/uploads/2018/02/motorcycle.jpg’ }}
style={styles.imageStyle} />
<Text style={{fontSize:30, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
imageStyle : {
width: 200,
height: 200,
resizeMode: ‘contain’,
margin: 5
}
});
|
Screenshots:
Also Read :
How to Call Another Class Function From Default Class in React Native
React Native Set View Height Width in Percentage format Respect of Root View
React Native Change ListView Mode To GridView Dynamically on Button Click
React Native Common DatePicker for Android and iOS Example Tutorial
React Native LightBox to Highlight Image View Using Animation Android iOS Example Tutorial
