I can't scroll my child component inside the flatlist,hope someone chould help me! if you need more detail,please let me know.
<View style={{flex:1}}>
<FlatList
data={DATA}
keyExtractor={(item)=>item.key}
renderItem={({item})=>(
<View style={{flexDirection:'row'}}>
<View>
<Text>item1</Text>
</View>
<View>
<Text>item2</Text>
</View>
<View>
<Text>item3</Text>
</View>
.
.
.
</View>
</FlatList>
<View/>
Related
I have no idea why setting the size like I am on line 38 is causing the android app to crash. If you take the size away, it works perfectly fine.
I have all of the scales commented out because I thought it could be something with them.
I would greatly appreciate any insight at all! Thank you!!!
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
export default function HomeScreen() {
return (
<LinearGradient
colors={['#FF0093', '#272933', '#272933']}
style={styles.container}>
<TouchableOpacity>
<View style={{flexDirection: 'row', /*top: scale(150)*/}}>
<View style = {{/*paddingLeft: scale(10)*/}}>
<MaterialCommunityIcons
name="account-outline" color='white' size='50'>
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center', /*paddingLeft: scale(20)*/}}>
<Text style={styles.accountPlaceholder} >
Click for Account Settings
</Text>
</View>
<View style = {{/*paddingLeft: scale(20)*/ justifyContent: 'center'}}>
<MaterialCommunityIcons
name="chevron-right" color='white' >
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click for Accoutn Settings */}
{/* Beginning of Click to Sign Up*/}
<TouchableOpacity>
<View style={{flexDirection: 'row', /*top: scale(150)*//* paddingTop: scale(30)*/}}>
<View style = {{/*{paddingLeft: scale(15)*/}}>
<MaterialCommunityIcons
name="logout" color='white' >
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center',/* paddingLeft: scale(15)*/}}>
<Text style={styles.accountPlaceholder} >
Click to Sign Out
</Text>
</View>
<View style = {{/*paddingLeft: scale(92*)*/ justifyContent: 'center'}}>
<MaterialCommunityIcons
name="chevron-right" color='white' >
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click to Sign up */}
</LinearGradient>
);
}
Use size as an integer, like:
size={50}
whereas you are using size as a string:
size='50'
Note that this is also true for margin styling.
Use
margin:20
and not
margin:"20"
I am new to React Native and trying to build a simple app that displays four images on the screen with Touchable function however there is margin between pictures and setting margin:0 and padding:0 are not helping at all.
What might be a solution?
render() {
return (
<View>
<SafeAreaView>
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<ImageBackground
style={styleImage.container}
source={item.pic}
>
<Text>{item.title}</Text>
</ImageBackground>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
}
}
const styleImage = StyleSheet.create({
container: {
height: "30%",
width: "30%",
padding:0,
margin:0,
},
});
1:
Try this...
Replace ImageBackground with Image
and add one property to it resizeMode='cover', it will pull the image to ends of image area
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<View>
<Image
resizeMode="cover" // or 'stretch'
style={{ height: 200, width: 200 }}
source={item.pic}
/>
<View style={{ position: "absolute", zIndex: 9 }}>
<Text>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
Style as your requirement
I have a problem with aligning icons in TouchableOpacity in one row.
This is my code:
<View style={styles.container12}>
<View style={styles.sociaContainer}>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
<Icon name="facebook" size={50} color="#fff" />
</TouchableOpacity>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
<Icon name="instagram" size={50} color="#fff" />
</TouchableOpacity>
</View>
<Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>
const styles = StyleSheet.create({
socialIcon: {
alignItems: 'center',
flexDirection: 'row',
marginLeft: 50,
},
container12: {
flex: 1,
flexDirection: 'row',
marginTop: 20,
},
});
I tried every combination with flex that I know, but it's not working. For every other element it is working, but not in this case.
This is the result:
I want them on one row.
Just a simple style change made your code works. Check this
<View style={styles.container12}>
{/* <View style={styles.sociaContainer}> */}
<View style={styles.container12}>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
<Icon name="facebook" size={50} color="#fff" />
</TouchableOpacity>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
<Icon name="instagram" size={50} color="#fff" />
</TouchableOpacity>
</View>
<Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>
Hope this will helps you.
I want to set two textInputs on same row , named set 1 and set 2
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
Please send me the css paticulat, Thanks in Advance
If you want your labels and TextInputs in the same line the code will be like this:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 0}}>Expiration date</Text>
<TextInput style={{flex: 1}} />
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 0}}>CVV</Text>
<TextInput style={{flex: 1}} maxLength={17} />
</View>
</View>
i have a made a calculator app and there's one line (i can see, let me know if there's any thing else) where i think I'm mutating the state and i shouldn't ? (and yes I'm using eval() to do it). is this wrong?
this line
return eval(state.replace(/x/g, '*').replace(/÷/g, '/'))
reducer:
import { NUMBER_BUTTON, EQUALS_BUTTON, CLEAR_BUTTON, DECIMAL_BUTTON } from '../actions'
export default function calc(state = '', action) {
switch (action.type) {
case NUMBER_BUTTON:
return state+=action.value
case DECIMAL_BUTTON:
if(state.indexOf('.') > -1 ){
return state
}
return state+='.'
case EQUALS_BUTTON:
if(state.length > 0){
return eval(state.replace(/x/g, '*').replace(/÷/g, '/'))
}
case CLEAR_BUTTON:
return ''
default:
return state
}
}
component code: for reference
<View style={styles.container}>
<View style={styles.result}>
<Text style={styles.totalText}>{total}</Text>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('1')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>1</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('2')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>2</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('3')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>3</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('4')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>4</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('5')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>5</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('6')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>6</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('7')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>7</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('8')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>8</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('9')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>9</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('0')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>0</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => decimal('.')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>.</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' + ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>+</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number(' - ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>-</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' ÷ ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>÷</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' x ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>x</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => clear()}>
<View style={[styles.btnClear, this.calculatedSize()]}>
<Text style={styles.btnTxt}>C</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => equals()}>
<View style={[styles.btnEquals, this.calculatedEqualsSize()]}>
<Text style={styles.btnTxt}>=</Text>
</View>
</TouchableHighlight>
</View>
</View>
That doesn't look like it. The eval() call seems to be just evaluating the return value of an expression, which should be completely self-contained
Where you are mutating state though, is in these lines:
case NUMBER_BUTTON:
return state+=action.value // <------ mutate
case DECIMAL_BUTTON:
if(state.indexOf('.') > -1 ){
return state
}
return state+='.' // <-------- mutate
The += operator is a no-no. Just change it to a + operator, since you're returning the new state, and all should be fine.