Develop Reference

Image disappear when CARD Component is added -React Native

I am trying to add an image and card component (from react-native-elements library) in my screen (image at the top & card element in the bottom).
But in my final output, Only the card element is shown but the image is not shown in my screen. Anyone can help? Much appreciate!
My Code :
<View style={styles.FirstContainer}>
<Image style={styles.img} source={pic} />
<Card>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
</Card>
</View>
My styleSheet:
const styles = StyleSheet.create({
FirstContainer: {
flex: 0.5,
flexDirection: "column"
},
img: {
flex: 0.5,
maxWidth: '100%',
},
title: {
textAlign: 'center',
fontSize: 15,
alignItems: 'center',
paddingRight: 50
},
container: {
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
},
})
My output:

React-Native Horizontal Scrollview not working but works well with vertical

I am new to react-native. I want to achieve a horizontal scrolling of list. When added horizontal the scrolls won't work. But it works well went removed horizontal={true}.
Below is the code.
<View style={styles.headerMargin} >
<ScrollView
horizontal={true}
style={{ marginLeft: 15, marginRight: 15 }}
contentContainerStyle={{
justifyContent:
this.state.typeofCountry.length > 2
? 'flex-start'
: 'center',
width: '100%',}}
>
{this.state.typeofCountry.map((item, i) => {
return (
<View
style={{
flexDirection: 'row',
alignContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<Text
style={[
styles.textBlacRegular,
{ marginLeft: i == 0 ? 0 : 10 },
]}>
{item.label}
</Text>
<View style={{ justifyContent: 'center' }}>
<Image
style={{
width: 30,
height: 18,
marginLeft: 10,
marginRight:20,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
}}
source={item.icon}></Image>
</View>
</View>
);
})}
</ScrollView>
</View>
Styles:
headerMargin:{
flexDirection:"row",
width:'100%',
marginTop:6,
marginBottom:5,
height:30,
borderColor:"#2795FF",
borderBottomWidth:1.5,
alignSelf:"center",
justifyContent:"center",
alignItems:"center",
alignContent:"center",
paddingBottom:5
}
Can anyone let me know what wrong with the code.
The above code works well in iOS but not in android.

Straight from React Native docs, for the scroll view's children to be arranged horizontally in a row instead of vertically in a column the only prop you need to use it's horizontal.
<ScrollView horizontal>
<Child/>
</ScrollView>

Add a horizontal prop to the ScrollView component like so:
<ScrollView horizontal={true}> </ScrollView>
You can also use a FlatList and use the same horizontal prop on it too.

How can I break line of Picker Items in React Native

My problem is as follows, I am passing a large string to one of the Picker items, because of this, the text is not displaying completely on the screen.
I tried to set a fixed width but this solution did not work.
<View style={styles.container}>
<Image source={logo} />
<View style={styles.bodyContainer}>
<Text style={styles.message}>
Para que possamos verificar se Sr. (a) está apto (a) para receber o benefício da
previdência social, por favor, nós informe a categoria do usuário.
</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
mode="dialog"
selectedValue={this.state.userCategory}
onValueChange={(itemValue, itemIndex) => {
if (itemValue !== '') {
this.setState({userCategory: itemValue});
}
}}>
<Picker.Item
color="#979898"
label="Por favor, selecione o tipo do benefício..."
value=""
/>
<Picker.Item color="#979898" label={data.categories[0]} value="0" />
<Picker.Item color="#979898" label={data.categories[1]} value="1" />
<Picker.Item color="#979898" label={data.categories[2]} value="2" />
</Picker>
</View>
const styles = StyleSheet.create({
pickerContainer: {
width: '100%',
height: 50,
borderColor: '#707070',
borderWidth: 1,
borderRadius: 10,
overflow: 'hidden'
},
picker: {
width: '100%',
height: 50,
color: '#979898',
flexDirection: 'column'
},
});
I wish that if the text was larger than the maximum width there would be a line break.
image of the problem:

You can set your View component with flexDirection: "row" and your Text component style with flexWrap: "wrap":
<View style={{ flexDirection: 'row', alignItems: "center" }}>
<Text style={{ flexWrap: 'wrap', flex: 1}}>{item.nome}</Text>
</View>

Giving fixed width will automatically truncate your text.
Try giving it flex:1 and also text comes with a prop of numberOfLines try using that.
Moreover, if you can give padding to text to make it aligned in the view.
Dont give it fixed width or fixed height.

How to display floating button over webview on android

can't display floating button over webview on android.
ios work fine, on android doesn't show.
render function:
<View style={{ flex: 1}}>
<View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
<TouchableHighlight style={styles.addButton}
underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
<Text style={{fontSize: 50, color: 'black'}}>+</Text>
</TouchableHighlight>
</View>
<WebView
source={require('./index.html')}
style={{marginTop:0}}
scalesPageToFit={Platform.OS !== 'ios'}
onMessage={this.onMessage}
postMessage={"Hello from RN"}
/>
</View>
css:
const styles = StyleSheet.create({
addButton: {
backgroundColor: '#ff5722',
borderColor: '#ff5722',
borderWidth: 1,
height: 100,
width: 100,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: 20,
right:20,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
});
How can I display a button over web view on android ?

The solution is pretty simple, put the Button View code under/after the WebView code
<View style={{ flex: 1}}>
<WebView
source={require('./index.html')}
style={{marginTop:0}}
scalesPageToFit={Platform.OS !== 'ios'}
onMessage={this.onMessage}
postMessage={"Hello from RN"}
/>
<View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
<TouchableHighlight style={styles.addButton}
underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
<Text style={{fontSize: 50, color: 'black'}}>+</Text>
</TouchableHighlight>
</View>
</View>
If for some reason you can't put it under the WebView, adding a elevation style prop higher than the WebView's, alongside the zIndex style prop will work for you.

That's because the zIndex property is quite broken on Android (see the dedicated issues). To compensate for it, you must invert the rendering order of your container's children.
This can be done either by rendering the button after the WebView:
<View style={{ flex: 1 }}>
<WebView />
<View style={{ styles.button }} />
</View>
Or by reversing the display order in your container, using flexDirection:
<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
<View style={{ styles.button }} />
<WebView />
</View>
Note that you can also use the android-specific elevation API. This will act as a reliable z-index and is the only way to display a shadow on Android.

TextInput flexDirection:row not working in React-Native

I am currently using React-Native for an Android Project. I have been trying to make a TextInput field with an icon beside the field. However, for some reasons, I notice that the flexDirection: 'row' is not working if the TextInput is one of its child component. The whole view of the one that I apply the style will automatically disappear. This is a snippet of how my code looks like:
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{flexDirection: 'row'}}>
<Image
style={{height: 30, width: 30}}
source={require('./images/email-white.png')}
/>
<TextInput
style={{height: 40}}
underlineColorAndroid={'transparent'}
placeholder={'E-mail'}
placeholderTextColor={'white'}
onChangeText={(data) => this.setState({ username: data })} />
</View>
</View>
I also tried to wrap both component inside each individual view, but the problem still persists. Is there anyone who knows how to solve this? or anyone can confirm that this is a bug?

Your code with a small modification worked fine for me. The only thing I did was adding a width to the TextInput resulting in the icon being beside the text-input.
Working code:
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{flexDirection: 'row'}}>
<Image
style={{height: 30, width: 30}}
source={require('./images/email-white.png')}
/>
<TextInput
style={{height: 40, width: 300}}
underlineColorAndroid={'transparent'}
placeholder={'E-mail'}
placeholderTextColor={'white'}
onChangeText={(data) => this.setState({ username: data })} />
</View>
</View>

I had the same problem when I was building example code from the book Mastering React Native
The code had enclosed a TextInput field in a View with a flexDirection: 'row' and the child TextInput field was not accessible. Only the TextInput border was visible. After playing around with some of the suggestions on this page I found something that worked.
If the container view has a flexDirection: 'row'. Please make sure to add a flex: 1 into your textfield input. The image flex does not seem necessary. As soon as I added the flex: 1 to the styles.input sheet, the TextInput was accessible.
The following code works for me :
<View style={globalStyles.COMMON_STYLES.pageContainer}>
<View style={styles.search}>
<Image
style={{height: 30, width: 30}}
source={require('../../images/email-white.png')}/>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ searchText: text})}
value={this.state.searchText}
placeholder={'Search'}
placeholderTextColor={globalStyles.MUTED_COLOR}/>
</View>
</View>
Local Styles :
const styles = StyleSheet.create({
input: {
flex: 1,
height: 35,
color: globalStyles.TEXT_COLOR,
borderColor: globalStyles.MUTED_COLOR,
backgroundColor: globalStyles.BG_COLOR
},
search: {
borderColor: globalStyles.MUTED_COLOR,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,
borderWidth: 1,
// marginTop: 10,
// marginBottom: 5
}
})
Global Styles (styles/global)
export const COMMON_STYLES = StyleSheet.create({
pageContainer: {
backgroundColor: BG_COLOR,
flex: 1,
marginTop: 0,
paddingTop: 20,
marginBottom: 48,
marginHorizontal: 10,
paddingHorizontal: 0
},
text: {
color: TEXT_COLOR,
fontFamily: 'Helvetica Neue'
}
});
Hopefully this provides assistance to you guys. It took me a long time get something this simple working.

Try closing your Image tag...
<Image style={{width:30, height: 30}} source={require('./icon.png')} />
Also, add some dimensions to your TextInput...
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
You might also need to set flex: 0 on the image and flex: 1 on the TextInput