i use the native base components. when use the icon in item area by input, when change language system icon direction change. there is way to fix icon direction ?
<View style={LoginStyle.MainViewS}>
<View style={LoginStyle.DataView}>
<Item style={LoginStyle.ItemS} >
<Input placeholder="username" style={LoginStyle.InputS} />
</Item >
<Item style={LoginStyle.ItemS} >
<Icon name='checkmark-circle' style={{ color: 'green', }} />
<Input placeholder="password" style={LoginStyle.InputS} />
</Item>
<TouchableOpacity style={LoginStyle.TouchableS} onPress={() => Actions.register()} >
<Text style={LoginStyle.TouchableTS} >register</Text>
</TouchableOpacity>
<TouchableOpacity style={LoginStyle.TouchableS} onPress={() => Actions.forgetpass()} >
<Text style={LoginStyle.TouchableTS}>forgetpass</Text>
</TouchableOpacity>
<TouchableOpacity style={LoginStyle.TouchableBS} onPress={() => Actions.index()}>
<Text style={LoginStyle.ToucableBTS}>login</Text>
</TouchableOpacity>
</View>
</View>
What is the style of LoginStyle.InputS and LoginStyle.ItemS?
Try adding:
{ position: 'absolute', top: 0, right: 0 }
to the LoginStyle.InputS
<Item style={LoginStyle.ItemS} >
<Icon name='checkmark-circle' style={{ color: 'green', }} />
<Input placeholder="password" style={{...LoginStyle.InputS, position:'absolute', top:0, right:0}} />
</Item>
Related
I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render
return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}}
renderItem = {_renderItem}
data = {dataToRender}
showDoneButton = {false}
showPrevButton = {false}
showNextButton = {false}/>
)
And the Slider items that i'm rendering look like this
_renderItem = ( {item} ) => {
return (
<View style={{flex:1}}>
<Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>
<View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
<Image source={{uri: 'http://openweathermap.org/img/wn/' + item.icon + '#2x.png'}} style={{width:90, height:90}}/>
<Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
</View>
<View>
<Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>
<View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>
<View style={{ marginTop:40, flexDirection:'row'}}>
<Icon name='wind' size={28}/>
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row'}}>
<Icon name='temperature-low' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='temperature-high' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='compress-alt' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
</View>
</View>
</View>
<View>
<FlatList
data={dataToRender16}
renderItem={renderFlatListItem}/>
</View>
</View>
);
}
And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked
First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList.
checkout the following example:
<FlatList
keyExtractor={(item, index) => item.id}
data={dataItems}
renderItem={itemData => (
<ItemComponent
id={itemData.item.id}
onDelete={removeItemHandler}
title={itemData.item.value}
/>
)}
/>
Adding flex:1 to styles of the that FlatList is netsted is solved the issue
<View style={{flex:1, alignItems:'center', paddingTop:50}}>
<FlatList
data={dataToRender16 }
renderItem={renderFlatListItem}/>
</View>
I am trying to space my components however I am having issues. I would like my grid to take up 90% of the screen and the gear icon to take 10%
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{flex: 1}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
</View>
What I have
What I am hoping for
I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this
You put flex: 1 in both Views, this means that both will try to take up 50% of the space (1+1). If you want one to take 90% and the other one 10%, one will need flex: 9 and the other one flex: 1.
Just change the flex values:
<View style={{flex: 9}}>
<FlatGrid
...
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
To try to make it clearer: just imagine the sum of the flex values on the same level are 100%. Since you had 2 flex: 1, 1+1=2=100%, so 1=50%.
By making the change I suggested (flex: 9 and flex: 1) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.
const {width} = Dimensions.get('window');
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{width : 0.9*width}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{width : 0.1*width}}>
<Icon name="settings" size={30} />
</View>
</View>
try this, don't forget to import Dimensions from react-native
use cosnt {width} = Dimensions.... out of return statement.
You can set your gear icon as an absolute element:
<View style={styles.grid}>
<Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
with the following styles:
grid: {
alignSelf: 'center',
width: width * 0.9,
},
icon: {
position: 'absolute',
right: -iconSize,
top: 0,
}
Here is a working snack: https://snack.expo.dev/#hristoeftimov/absolute-icon
Hey
I have my bottom bar out the Scroll View component,But it still scroll with the other components.
How can i make it fixed ?
"
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
<Divider width={1} />
<BottomTabs />
</SafeAreaView>
"
Entire Code Screen
You can use flex proportions to separate the and components, as below
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15, flex : 1 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<View style= {{flex : 3 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
</View>
<View style= {{flex : 1 }}>
<Divider width={1} />
<BottomTabs />
</View>
</SafeAreaView>
You can do it by styling your button component as -
<TouchableOpacity
style={{
width: 60,
height: 60,
backgroundColor: 'red',
position: 'absolute',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => {
console.log('Button Pressed')
}}
>
<Text>Hello Bottom Button</Text>
</TouchableOpacity>
I'm using native base in screen, and I'm trying to add but it is not working properly as keyboard still hides the text inputs
render() {
return (
<Container>
<Header style={styles.header}>
<Left style={styles.left}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("Welcome")}
>
<FontAwesome
name={I18nManager.isRTL ? "angle-right" : "angle-left"}
size={30}
color="#6f6f6f"
/>
</TouchableOpacity>
</Left>
<Body style={styles.body} />
<Right style={styles.right} />
</Header>
<View style={styles.signuplogosec}>
<Image source={Logo} style={styles.signuplogostyle} />
</View>
<KeyboardAvoidingView behavior="padding" enabled>
<Form style={styles.form}>
<Item rounded style={styles.inputStyle}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="First Name"
onChangeText={(first_name) => { this.setState({ first_name }) }}
style={styles.inputmain}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Last Name"
style={styles.inputmain}
onChangeText={(last_name) => { this.setState({ last_name }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Email"
style={styles.inputmain}
autoCapitalize='none'
onChangeText={(email) => { this.setState({ email }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(password) => { this.setState({ password }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Confirm Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
/>
</Item>
<TouchableOpacity
info
style={styles.signInbtn}
onPress={this.signIn}
>
<Text autoCapitalize="words" style={styles.buttongetstarted}>
Sign Up
</Text>
</TouchableOpacity>
</Form>
</KeyboardAvoidingView>
<View style={styles.signupbottomView}>
<TouchableOpacity
style={styles.fbButton}
onPress={() => alert("Facebook button Clicked")}
>
<View iconRight style={styles.fbview}>
<Ionicons name="logo-linkedin" size={30} color="white" />
<Text autoCapitalize="words" style={styles.fbButtonText}>
Sign Up with LinkedIn
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupbottomText}
onPress={()=>{this.props.navigation.navigate('SignIn')}}>
<Text style={styles.bottomText01}>
Do you have an account?{" "}
<Text style={styles.bottomText02}>Sign In</Text>
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default SignUpScreen;
I have tried to add different views inside form tag but it is still not working, I have tried to create different form tags but failed.
My requirement is simple I want to use the KeyboardAvoidingView inside Native base components, I'm wrong some where but I don't know where
Just import KeyboardAvoidingView from react-native using with
behavior='position'
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<KeyboardAvoidingView behavior='position'>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
}
import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';
//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Content>...</Content>
</KeyboardAvoidingView>;
I'm using React Native and NativeBase.
I just try to show an icon next to an entry and add TouchableOpacity to after trigger a function, but the icon disapear
This is my code:
<Item floatingLabel>
<Label>Password</Label>
<Input
autoCorrect={false}
autoCapitalize='none'
secureTextEntry={ this.state.securePass }
onChangeText = { value => this.updateInput('password', value)}
value = { this.state.form.password.value }
type = { this.state.form.password.type }
/>
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
</Item>
If I put this code outside the Item of nativeBase works but no inside:
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
I hope you can helpme!
Thanks!!
<View style={{flexDirection: 'row'}}>
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
<Item floatingLabel>
<Label>Password</Label>
<Input
autoCorrect={false}
autoCapitalize='none'
secureTextEntry={ this.state.securePass }
onChangeText = { value => this.updateInput('password', value)}
value = { this.state.form.password.value }
type = { this.state.form.password.type }
/>
</Item>
</View>