I finally got my page transition animation working correctly (it slides from the bottom to the top of the screen) but for some reason there is a blank white "loading screen" that appears before the page does and it is ruining the whole point of the sliding animation! Can someone please tell me how to get rid of this white screen?!
Please see a video I made of this: https://youtu.be/92XGji7L-RU
const { height: deviceHeight } = Dimensions.get('window'); class OrdersScreen extends Component { constructor(props) { super(props); this.state = { offset: new Animated.Value(deviceHeight), }; } componentDidMount() { Animated.timing(this.state.offset, { duration: 350, toValue: 0, }).start(); } closeModal() { Animated.timing(this.state.offset, { duration: 350, toValue: -deviceHeight, }).start(Actions.pop); } searchOrders = searchTerm => { this.props.dispatch(searchOrdersWithStatus(this.props.orderStatus, searchTerm)) } render() { // default to Active Orders const status = this.props.orderStatus || ORDER_TYPE_DELIVERIES; let title = 'Order History'; if (ORDER_TYPE_DELIVERIES == status) { title = 'Orders'; } if (ORDER_TYPE_ISSUES == status) { title = 'Item Alerts'; } return ( <Animated.View style={[styles.wrapper, { transform: [{ translateY: this.state.offset }] }]}> <OrderHeader title={title} enableBack={false} /> <FullWidthSearchBar placeholder='Search Orders' changeCallback={this.searchOrders} timeoutMillis={500} /> <OrderSummaryList orderStatus={status} /> </Animated.View> ); } } const styles = StyleSheet.create({ wrapper: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, alignItems: 'center', justifyContent: 'flex-start' } }); 1 Answers
Answers 1
Your <OrderSummaryList /> component probably loads data from API - it takes some time ... on initial render data is not ready yet ... render shows `' component. This "content" is animated ... later data arrives and content is rerendered.
You can try to delay animation on start - using .delay(miliseconds) instead of start() in componentDidMount(). Find required time experimentally - too short can show loading (slow connection), too long will look like not responding app.
0 comments:
Post a Comment