React Native: How to make a view stick on screen while the screen changes?

Question

I'm building a podcasting app with react native and I would like to implement the mini player you see at bottom of screen in most podcasting/music apps. See image below. I want to make the mini player stick no matter which screen you navigate to. Any idea how to implement this in react native? I'm using react navigation as the main navigator right now https://reactnavigation.org/.

Answer 1

The best way to do this is use the magic of flexbox.

Think about your app as combination of two major screens.
1) The part with header, navigation menus and the playlist (inside etc.)
2) The player

Try this layout

<View style={styles.container}>
    <View style={styles.firstBox}>
        1)
    </View>
    <View style={styles.secondBox}>
        2)
    </View>
</View>

Now all you have to do is assign proper styles

const styles = {
    container: {
        flex: 1,
    },
    firstBox: {
        flex: 8
    },
    secondBox: {
        flex: 2
    }
}

This is enough for the basic structure. You can design accordingly.