react-nativecopy-pastereact-native-web

Copy/paste with flex layout in react-native-web

I have an application that works on native and web via React Native and React Native Web. One screen includes a list with custom bullets as in the image below, although the text often runs to multiple lines. The problem is that when you copy/paste (at least on web), the bullet image winds up on a separate line from the text, and it looks awful. Is there some way to refactor the view so that copy/paste keeps the original appearance?

    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start', width: '100%' }}>
        <Image style={{ height: 10, width: 14, marginTop: 9 }} source={TRIANGLE_BULLET as ImageSourcePropType} resizeMode="contain" />
        <View style={{ width: '90%', marginTop: 3, marginBottom: 3, marginLeft: 7 }}>
            <Text>Final scoring</Text>
        </View>
    </View>

The words "final scoring" preceded by a triangle

Solution

  • Setting padding-left: 14px and text-indent: -14px did the trick. From past experience with React Native, I thought a negative text-indent would cause problems, but it actually works fine.