'React Native. How to scale view to fix smaller screens
I have a component that show on iPhone 13 however on iPhone SE which have slight smaller screen some of my elements are not completely showing. I like to know if there a way that I can scale the component so that everything shows on the screen. In this example I have iPhone SE which is cutting off my save button and preview window. however on bigger devices everything show. I do not want this view to be able to scroll.

<>
<Appbar.Header>
<Button
labelStyle={{color: 'white'}}
icon="arrow-left"
mode="text"
onPress={() => goToStep(1)}>
Scenes List
</Button>
<Appbar.Action />
</Appbar.Header>
<View
style={[
styles.container,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]}>
<View style={styles.topContainer}>
<TextInput
label="Title (Optional. Default is used if blank)"
mode="outlined"
ref={inputRef}
value={text}
onChangeText={inputText => setText(inputText)}
/>
<Paragraph>
Select a text color then an icon or background color for your button{' '}
<Paragraph style={{color: 'red'}}>
(To reset, press and hold buttons)
</Paragraph>
</Paragraph>
<View style={styles.row}>
<View style={styles.btnWrapper}>
<View style={styles.textBtnContainer}>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'TEXT COLOR'}
selectedColor={setSelectedTextColor}
/>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'BG COLOR'}
selectedColor={setSelectedBgColor}
/>
<UploadIcon path={setImage} />
</View>
<Button
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
</View>
{screen.orientation === 'Landscape' && (
<View style={styles.previewPortrait}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</View>
{screen.orientation === 'Portrait' && (
<View style={styles.previewLandscape}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
