I am trying to wrap my head around a weird phenomenon. Setting paddingLeft on a React Native view (an Expo project), the padding suddenly 'jumps'.

On the containter element, I set different values for paddingLeft (see code snippet further down).

paddingLeft: 11

Up to 11, everything works as I would expect it.

paddingLeft: 12

Going from 11 to 12, suddenly there is padding on both sides and the content become very slim

The structure of the view and the styling

    return(<View style={styles.constainer}><Text style={styles.title}>{'some placehoder text'}</Text><ScrollView                 style={styles.scrollView}                showsVerticalScrollIndicator={false}                onScroll={saveScrollPosition}                scrollEventThrottle={500}                ref={scrollRef}>                {lessonViews}</ScrollView></View>    )}const styles = StyleSheet.create({    constainer: {        paddingLeft: 11    },     title: {        ...typo.h1    },    scrollView: {        height: '87%',    }})

Has anyone seen this before? What am I missing?