Using NativeBase v3 library, There is leftIcon props, but it place icon near of title in center I need icon very left of the button, here is my component;
<Button
width="full"
primary
onPress={() => {}}
leftIcon={<Icon name="check" size={12} color="white" />}
>
<Text style={{color: 'white'}}> Checkout </Text>
</Button>
need to put icon as seem in pic below;
And, do you know whats name of the icon at right? :)
I think you're missing the as prop on your passed icon. And i think the placement can be changed if you add a style prop to the icon
try:
leftIcon={<Icon as={Ionicons} name="check" size={12} color="white" style={{alignSelf: 'flex-start'}} />}
And i think the icons on the right of your image is just three chevron-right with decreasing opacity
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>
</>
There is no general solution for dealing with smaller devices that work out of the box. Most of the time, you have to explicitly deal with this yourself. One way to do this is by retrieving the screen dimensions and than change the design layout and font sizes yourself.
You can do this by using the following code snippet.
import { Dimensions } from "react-native"
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height
An iPhone SE in the first generation has a logical screen width of 320 pixels and a logical height of 568 pixels.
In your specific case you might want to implement a different layout, if the screen width is less or equal to 320 pixel. You could also try to scale the sizes of your components responsively. For the save button this could look as follows.
const width = Dimensions.get("window").width
...
<Button
style={{width: width > 320 ? "100%" : "70%"}}
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
You could also play around with different flex layouts, but you eventually will need to implement different behaviors for very small devices yourself.
I'm using react-native-paper Modal.
I used KeyboardAvoidingView but its not working. It working fine in android ,But it's not working in IOS.
I have specify behaviour as padding, position, height of KeyboardAvoidingView but it doesn't work
Please give any solution.
Screenshot on Android [1]: https://i.stack.imgur.com/UETKh.jpg
Screenshot on IOS[2]: https://i.stack.imgur.com/SIDib.png
My code is as below:
<Modal
contentContainerStyle={{ backgroundColor: 'white', padding: 20, borderRadius: 10, marginLeft: 30, marginRight: 30 }}
animationType="fade"
visible={this.state.dialogVisible}
>
<KeyboardAvoidingView behavior='padding' enabled>
<Text style={styles.descDialogInqueryFor}> Inquire for </Text>
<TextInput
autoFocus={true}
maxLength={50}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Name'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ name: text })}
></TextInput>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayEmailError }]}>Invalid email address</Text>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayPhoneError }]}>Invalid phone number</Text>
<TextInput
maxLength={30}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Subject'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ subject: text })}
></TextInput>
<TextInput
blurOnSubmit={true}
multiline={true}
underlineColorAndroid={'transparent'}
style={styles.messageInpuText}
placeholder='Message'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ message: text })}
></TextInput>
<Button style={styles.sendButtonDialog} onPress={() => this.sendInquire()}>
<Text style={styles.sendButtonText}>Send</Text>
</Button>
</KeyboardAvoidingView>
</Modal>
You just add KeyboardSpacer in the Modal
In my experience, if you don't want any issue about keyboard you need using scrollview and observer keyboard show/hide for animal fix layout. Custom yourself.
I have get this issue too and because I support many version ios so using KeyboardAvoidingView can not fix all of them and sometime get some hidden issue just appear when you have many user using special version.
Android auto scroll content when layout change so you no need to do anything to fix layout when keyboard show. If you check KeyboardAvoidingView for ios maybe it effects to android. So observer keyboard show and custom yourself will be best that is mine sugess.
PS I remember KeyboardAvoidingView have contentOffSet attribute to fix animation scroll when keyboard change state. But I very confused how to using it fixable for all version ios and after many trying time I custom myself. Hope my experience can help you see the right way in your case
I have the background transparent image (the light blue in the screenshot). The problem is when I type something in the textbox a vertical scroll comes up and the form moves a little bit up. Is it possible that the background moves with the scroll as well?
#1 - in the screenshot is the form that moves
#2 - is the background image
Here is the code
<Container style={styles.container}>
<ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>
<Content>
<View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>
<View style={{marginTop:10}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
<View style={{marginTop:15}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
{this.state.Loading==true?
<ActivityIndicator
animating={true}
style={styles.indicator} />
:
<View>
<View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
<View style={{width:'13%',justifyContent:'center'}}>
<TouchableOpacity onPress={() => this._toggleRememberme()}>
<Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
</TouchableOpacity>
</View>
<View style={{width:'41%',justifyContent:'center'}}>
<Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
</View>
<View style={{width:'46%',justifyContent:'center'}}>
<Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
</View>
</View>
<Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>
<Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Text style={{color:'#fff',fontSize:19}}>Login</Text>
</Button>
</View>
}
</View>
</Content>
</ImageBackground>
</Container>
Just to clairify, you would like for the form to appear fixed above the image background, and for the form and image background to move together as you scroll. So, currently your background is fixed, but the form is above and scrolls independently of the background?
I just want to make sure I have your question correct :)
I think when you use ImageBackground it will always behave in this way, hence the "background". If you want the form to move with the image you could try to position the form with "absolute" position on top of a regular Image component. You might want to try using react-native-elements or react-native-paper as they have Card and Surface components which can help to achieve this behaviour.
I realize this isn't a very definitive answer but I hope it helps in some way. Also you might want to just check any style props of the components which you have used as well as reviewing the documentation on ImageBackground. https://reactnative.dev/docs/imagebackground
My apologies that I couldn't give you a better answer.
I'm using CheckBox from the react-native-elements. In the Documentation, there are not any IconProps. there is IconRight style which I used but it only aligning the Icon from the right of the title but I want to align the Icon at the end of the View.
here is the code -
<CheckBox
title={item}
key={index}
value={item}
ref={item}
checked={checked}
iconRight
iconType="material"
checkedIcon="clear"
uncheckedIcon="add"
checkedColor="red"
onPress={() => {
this.controlcheck(item, checked);
}}
/>
I want to align the + icon at the right of the end.
You can use this :
<CheckBox
title={<Text style={{flex:1}}>Hello World</Text>}
/>