React Native: no style on views works when I use react-router / react-router-navigation

Question

Advance, sorry if my english is not the best.

I've not been working on React Native for a very long time and now I have to implement an app with it. I currently use:

• Android Studio 3.3
• Android 9.0 Api 28
• React Native 0.57.8
• React Router 4.3.1
• React Router Native 4.3.0
• React Router Navigation 2.0.0-alpha.10

By the time I added the router, the styles worked like backgroundColor. Since then, the background of the app is only white and no matter which component I can't e.g. do represent a border when I use a view.

Have I might have missed something?

I have already tested the View element at every point. Same result. As I said, before I used React Router, it worked. With the integration of React Native Paper and Redux, there were no problems. I also tried customizing the styles.xml. Although this does work for permanently changing the background color, that's why I still can not put Border in any component. I also tried "component" instead of "render" in the Card component. And also with its own layout component.

App.js

import React from 'react'
import { StyleSheet, View } from 'react-native'

import { Provider as StoreProvider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'

import { NativeRouter } from 'react-router-native'
import { Navigation, Card } from 'react-router-navigation'

import { Provider as PaperProvider } from 'react-native-paper'
import theme from './assets/js/theme'

import { Login } from './components/Views'

const appStyles = StyleSheet.create({
    root: {
        backgroundColor: theme.colors.background
    }
})

export default App = () => {

    return (
        <View styles={ appStyles.root }>
            <StoreProvider store={createStore(reducers)}>
                <PaperProvider theme={theme}>
                    <NativeRouter>
                        <Navigation hideNavBar>
                            <Card
                                exact
                                path="/"
                                render={() => <Login/>}
                            />
                        </Navigation>
                    </NativeRouter>
                </PaperProvider>
            </StoreProvider>
        </View>
    )
}

part of Login.js

const loginStyles = StyleSheet.create({
    login: {
        width: 400,
        height: 400,
        borderWidth: 4,
        borderColor: theme.colors.error,
        borderRadius: 3,
        padding: 20,
        justifyContent: 'center'
    }
})

class Login extends Component {

    render() {

        console.log('LOGIN')
        return (
            <View styles={loginStyles.login}>
                <Text style={{ color: theme.colors.error, alignSelf: 'center' }}>Test</Text>
            </View>
        )
    }
}

None of it worked. Thanks for help.

Answer 1

I solved it myself. I am now using React Native Router Flux. I am still learning and trying out.