How to share CSS between React and React Native?

Viewed 133

Shall we use the inline CSS style also in React / Next.js app, to unify code between the two projects?

Like this?

import {StyleSheet, Dimensions} from 'react-native';

const vw = Dimensions.get('window').width / 100;

export const styles = StyleSheet.create({
  container: {
    paddingTop: 0,
    width: '100%',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 'auto',
    marginRight: 'auto',
    fontFamily: 'Rubik',
  },
  tableSection: {
    width: '100%',
    marginBottom: 0,
    fontFamily: 'Rubik-Bold',
  },
...

instead of :

.eventOptionTitle {
  word-wrap: break-word;
  text-overflow: ellipsis;
}

.starList {
  list-style-type: none;
  padding-left: 0;
}
1 Answers

I suggest looking into react-native-web for proper code reuse as it allows using the exact same StyleSheet objects. Sharing CSS with a regular React web app directly must be tricky, because of the difference in supported CSS ruleset, flex behaviour etc.

Related