What is the way to apply borders to every child component(element) in react native as in web ?

[wevak]

* {
      border: 1px solid
   }

I’ve read cascading in the react native style docs that “One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles “cascade” the way they do in CSS.”

<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’, borderStyle: ‘solid’, borderWidth: 1 }}>
Home Screen
<Button
title=“Go to Details Page”
onPress={() => navigation.navigate(‘Details’)}
/>
<Button
title=“Go to Notifications Screen”
onPress={() => navigation.navigate(‘Notifications’)}
/>

I’ve tried but it but the border is simply applied to the View Component and not inherited by the children components. I would like to know of how to add the borders to every child element in the react native.

[livelyops]

Hi,
You can probably try this:

import {StyleSheet, View, Button} from 'react-native';

const Page = () => {

return(
    <View style={[{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }, styles.applyBorder]}>
    Home Screen
   <Button
        title=“Go to Details Page”
       onPress={() => navigation.navigate(‘Details’)}
       style={styles.applyBorder}

   />
<Button
      title=“Go to Notifications Screen”
      onPress={() => navigation.navigate(‘Notifications’)}
      style={styles.applyBorder}
/>
);
}

const styles = StyleSheet.create({
applyBorder: {
    borderStyle: 'solid',
    borderWidth: 1,

},

});

export default Page;

Hope that answers your question.