White screen on Android using Expo.

[Ury18]

Hi!,
I have this component but when I uses <Stack> the screen is completely blank.
When I disable <Stack> everything shows but, obviously, there is no animations.
I would really appreciate it if you helped me! `

render() {
    const { props: { lang, history, status }, onLogin, onLogout } = this

    const backgroundColor_main = status && status.status === 'IN' ? '#65D2B2' : (status && status.status === 'BREAK' ? "#fcb70a" : "#EEEEEE")

    return <IntlProvider locale={lang} messages={i18n[lang]}>

        <View style={{ flex: 1, height: "auto" }} className="App">

            <ScrollView style={styles.container} contentContainerStyle={{ alignItems: 'center', justifyContent: 'center', alignContent: "center", width: "100%" }}>

                <Stack>
                    <Route exact path="/" render={props =>
                        <View style={[styles.routeView, { backgroundColor: backgroundColor_main }]}>

                            <Button text="I18N" onClick={() => { history.push("/i18n") }} />
                            <Button text="Register Company" onClick={() => { history.push("/register/company") }} />
                            <Button text="Login" onClick={() => { history.push("/login") }} />
                            <Button text="Remind Domains" onClick={() => { history.push("/domain_reminder/") }} />
                            <Button text="Change Password Request" onClick={() => { history.push("/change_password_request/") }} />
                            <Button text="My User Page" onClick={() => { history.push("/company/user/2") }} />
                            <Button text="Company" onClick={() => { history.push("/company") }} />
                            <Button text="Edit Company" onClick={() => { history.push("/company/editCompany") }} />
                            <Button text="Change Password" onClick={() => { history.push(`/change_password/${logic.getUserToken()}/${logic.getUserId()}/${logic.getDomain()}`) }} />
                            <Button text="Logout" onClick={onLogout} />
                            <CountrySelector size="long" />
                            <LanguageSelector size="long" />
                            <TimezoneSelector size="long" />
                            {status && <PunchInOut {...props} />}
                        </View>
                    } />
                    <Route exact path="/i18n" render={props =>
                        <View style={styles.routeView}>
                            <I18nTest {...props} />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/register/company" render={props =>
                        <View style={styles.routeView}>
                            <RegisterCompanyPanel />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/login/:domain?" render={props =>
                        <View style={styles.routeView}>
                            <LoginPanel {...props} onLogin={onLogin} />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/domain_reminder/" render={props =>
                        <View style={styles.routeView}>
                            <DomainReminder {...props} />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/change_password_request/" render={props =>
                        <View style={styles.routeView}>
                            <ChangePasswordRequest {...props} />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/change_password/:token/:id/:domain" render={props =>
                        <View style={styles.routeView}>
                            <ChangePassword {...props} onLogin={onLogin} />
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />






                    <Route exact path="/company" render={props =>
                        <View style={styles.routeView}>
                            {status && <UsersList />}
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/company/user/:id" render={props =>
                        <View style={styles.routeView}>
                            {status && <UserPage {...props} />}
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />
                    <Route exact path="/company/editUser/:id" render={props =>
                        <View style={styles.routeView}>
                            {status && <EditUser {...props} />}
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                    <Route exact path="/company/editCompany" render={props =>
                        <View style={styles.routeView}>
                            {status && <EditCompany {...props} />}
                            <Button text="Home" onClick={() => { history.push("/") }} />
                        </View>
                    } />

                </Stack>

            </ScrollView>
        </View>

    </IntlProvider>
}

}
`

[CLantigua2]

I'm having a similar issue currently, did you ever find a fix for this?

[Ury18]

Yes, I changed to react-navigation instead. It required some conversion but it was worth.