react-nativeexpo

How to modify expo android styles.xml in react native app


As many others before me, I'm looking for the way to customize expo android's theme colors and styles in order to customize native components styles like DatePicker.

I found a lot of posts explaining the same old thing: "Update your style the native android way!"

Ok then, but my React native project doesn't have any "res/values/styles.xml" and so on. Creating them from scratch has no effect.

There's one step that I'm deadly missing here, but which one?

My repo looks a bit like this actually:

.expo
/* a bunch of folders containing my custom js */
App.js
app.json
babel.config.js
package.json
package-lock.json

Solution

  • You can use Style Sheet.

    Create a new StyleSheet:

    const styles = StyleSheet.create({
      container: {
        borderRadius: 4,
        borderWidth: 0.5,
        borderColor: '#d6d7da',
      },
      title: {
        fontSize: 19,
        fontWeight: 'bold',
      },
      activeTitle: {
        color: 'red',
      },
    });
    

    Use a StyleSheet:

    <View style={styles.container}>
      <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
    </View>
    

    this is detail link

    To configure a style, such as Android.xml, you can separate it by doing expo eject.

    When you do expo eject, you get Android folder.

    about `expo eject' link