4

I'm starting with React Native and I'm wondering if is possible to apply the default OS style for each element so I have not the need to handle every element style so imagine I have a form and simple text list, for the iOS app it should have iOS form and text style and for the Android app its default style.

As far as I've seen there is no official documentation for this commitment but I would like to ask here if there is a workaround for this.

jesugmz
  • 2,320
  • 2
  • 18
  • 33

1 Answers1

2

As far as I am aware the default components within React Native does normally default to the OS style, for instance the Button component will render differently according to each platform.

As all the components that come with React Native are bare-bones, you'll have to define the styles yourself according to each platform which can be done with the Platform module: https://facebook.github.io/react-native/docs/platform-specific-code

If you don't want to style each component yourself then you can use a library like: react-native-elements (https://react-native-training.github.io/react-native-elements/) which handles a lot of what you desire.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Faisal
  • 104
  • 6
  • I am using React Native with Expo and for example a Button element contains none style in the Expo client for iOS. Not sure if compiling the app will use the OS styles but in that case Expo should not be a good simulator. React Native Elements looks really good but I am not looking for consistency in the styles but default OS style per OS. – jesugmz Dec 29 '18 at 15:03
  • Yep so for the button, in iOS it won't have a style, whereas if you open it in Android, it will have a box around it. If you want to copy the default styles, then you'll have to style them yourself (using the `Platform` module) and create your own components and use them according to each specific platform. As Dave corrected for me, all React Native components are bare-bones so, to create the text inputs you see in iOS, you will need to design them yourself, or use a framework. – Faisal Dec 29 '18 at 15:20
  • Like mentioned, `react-native-elements` does what you want, so a search bar for iOS and Android is different, when you use the search bar component that `react-native-elements` provides, changes the styling according to the OS of the device: https://react-native-training.github.io/react-native-elements/docs/0.19.1/searchbar.html – Faisal Dec 29 '18 at 15:22