Override React Native Style from Parent/Child Component

Question

In React Native way, if I have this structure:

function Component(props){
  return (
    <View style={props.style1}>
      <View style={{overflow: hidden}}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

How can I override the {overflow: hidden} on the 2nd View? Let say that I don't have the capability to change the Component because I use a library that I don't have access to.

score 0 · Answer 1 · edited Jul 28 '23 at 14:52

You can override styles only if you have something like this

export interface Props {
  extraStyle: ViewStyle
  }


function Component(props: Props){
  return (
    <View style={props.style1}>
      <View style={[ {overflow: visible}, props.extraStyle ]}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

and you have access to extraStyle prop outside, therefore if you define extraStyle = {{overflow: 'auto'}}, then it will be overridden. Otherwise, you cannot change its style from outside.

Override React Native Style from Parent/Child Component

1 Answers1