We need to implement pull to refresh functionality on scrollview in react native app with custom spinner. We have achieved this in iOS by using react native customControl. On iOS, ScrollView is scrolling and we are able to see the spinner on top, when we pull scroll view.
But the same code for android does not work. Because, In android the ScrollView is not scrolling when i pull the scrollview (May be the content is less than the screen height). The spinner will be visible only when we scroll the view. In this case, how to implement/achieve this functionality in android?
<View style={styles.containerStyle}>
<View style={styles.spinner}>
<Spinner />
</View>
<ScrollView
style={styles.scrollview}
contentContainerStyle={styles.contentContainer}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh}
tintColor='transparent'
colors={[ 'transparent' ]}
style={backgroundColor : 'transparent'}
/>
} >
</ScrollView>
</View>
Related
I implemented a bottom half modal view in react native, which is sliding in from the bottom . I set the background of the modal view to transparent so the previous view is still visible, but the modal view is in focus. This is working fine and once it is open it also looks how I want it to look. My problem is, that the transparent background is also sliding in from the background and this does not look like a native implementation at all. What I want to achieve is, that the transparent background just appears while the modal view slides in from the bottom. Any idea on how to solve this?
Note: Iam using Modal from inbuilt react native, hence not using any npm module or package.
My code:
import { View, Text, Modal } from 'react-native';
function DurationModal(props) {
<View>
<Modal
visible={props.isVisible}
transparent
animationType='slide'
statusBarTranslucent
>
<View>
<View style={{ backgroundColor: 'rgba(0,0,0,0.1)', height: hp('60%') }}></View>
<View style={{ backgroundColor: Colors.whiteBackgroundColor, height: hp('40%') }}>
<Text>Hello</Text>
</View>
</View>
</Modal>
</View>
);
}
React Native, Using PanResponder View as a parent and having flatlist as a child of the view, without PanResponder, flatlist scrolling is working fine but with PanResponder, flatlist scrolling is not working.
I dont find proper solution, but workaround is wrap the flatlist items in TouchableOpacity , it will make flatlist scrollable.
If you don't like TouchableOpacity's opacity then you can set activeOpacity to 1.
Example:
<View {...this.gestureHandlers.panHandlers} style={styles.container}>
<FlatList
horizontal={true}
data={this.state.FlatlistData}
renderItem={({ item }) => {
return (
<TouchableOpacity activeOpacity={1} style={styles.itemsStyle}>
{/* Your core view here */}
</TouchableOpacity>
)
}}
/>
</View>
I know there are a lot of issues opened with this question but I couldn't find any solution that work for both IOS and Android. The idea is to have ScrollView That can be scrolled to both directions (vertical and horizontal). At the moment my code looks like that:
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}}>
// content
</ScrollView>
</ScrollView>
It works fine for IOS but no luck with Android.
For ScrollView inside another scrollView you have to use nestedscroll prop in scrollview to deal with the scrolling.
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}} nestedScrollEnabled={true}>
// content
</ScrollView>
</ScrollView>
Use the above code and it will work as expected....
I hope this helps...Thanks :)
I'm trying to create an iMessage like sticky text input where the ScrollView content moves up when the keyboard is shown and down when the keyboard is dragged closed. In the React Native repository on Github, there is an example InputAccessoryViewExample.js that is almost exactly what I want, except when the keyboard is shown, ScrollView's content (the messages) are covered by the keyboard.
I've tried a few permutations of the following with no success.
<>
<KeyboardAvoidingView style={{flex: 1}} behavior="padding">
<ScrollView style={{flex: 1}} keyboardDismissMode="interactive">
{Array(15)
.fill()
.map((_, i) => <Message key={i} />)}
</ScrollView>
</KeyboardAvoidingView>
<InputAccessoryView backgroundColor="#fffffff7">
<TextInputBar />
</InputAccessoryView>
</>
I want make full screen modal with translucent StatusBar
So, I made Modal with StatusBar.
it work well on ios simulator. but It is just below StatusBar on android, Not full screen
This is my code
<Modal>
<View>
<StatusBar
barStyle="dark-content"
translucent
backgroundColor="transparent"/>
<SomeComponent
...
/>
</View>
</Modal>
How can I fix this?