ShadowView styles problem

[TommysG]

trafficstars

There is problem when i try to pass some styles in to the ShadowView. These styles doesn't apply:

<ShadowView style={styles.container}>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
</ShadowView>


const styles = StyleSheet.create({
  container: {
          shadowColor: '#000',
          shadowOffset: {
            width: 1,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 1.22,
          backgroundColor: '#fff',
          flexDirection: 'row',
          alignItems: 'center',
          width: 250,
          height: 250,
  }
});

In the above example the Texts (children) will not be next to each other as a row, but it will be aligned as a stack.

[dimaportenko]

Thanks for the report. I'll take a look, once I have time. Meanwhile, you can wrap text with another view as workaround.

[TommysG]

Yes i tried wrapping it inside another View with the styles i want but when i reload the app or navigate to another screen and back it's realigning all the children as a stack.

[dimaportenko]

Can you share what you tried? I'd like to check this case as well.

[dimaportenko]

I mean to do like

<ShadowView style={styles.container}>
    <View style={styles.inner}>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
    </View>            
</ShadowView>


const styles = StyleSheet.create({
  container: {
          shadowColor: '#000',
          shadowOffset: {
            width: 1,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 1.22,
          backgroundColor: '#fff',
          
  },
  inner: {
          flexDirection: 'row',
          alignItems: 'center',
          width: 250,
          height: 250,
  }
});

[TommysG]

I mean to do like

<ShadowView style={styles.container}>
    <View style={styles.inner}>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
            <Text>Hello this is text</Text>
    </View>            
</ShadowView>


const styles = StyleSheet.create({
  container: {
          shadowColor: '#000',
          shadowOffset: {
            width: 1,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 1.22,
          backgroundColor: '#fff',
          
  },
  inner: {
          flexDirection: 'row',
          alignItems: 'center',
          width: 250,
          height: 250,
  }
});

Yes this is exactly how i implemented it. On hot reload it works. But if i reload/restart the app or navigate back and forth it is buggy again (all the children aligned as a stack).

[dimaportenko]

I think I found workaround. Inner view style should have backgroundColor. In this case, everything works fine for me. Unfortunately, I haven't had time for a proper fix for it.