Does Anyone knows why the panel is not showing on android when I click on the button?
I'm using https://www.npmjs.com/package/rn-sliding-up-panel btw. Please feel free to tell me, if you have any other recommended sliding panel library.
const CCTVTab = () => {
return (
<React.Fragment>
<View
style={{
flex: 1,
marginTop: 30,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
}}>
<Button title="Show panel" onPress={() => _panel.show(300)} />
</View>
<SlidingUpPanel
style={{borderTopLeftRadius: 10}}
ref={c => (_panel = c)}>
<View
style={{
flex: 1,
backgroundColor: 'black',
alignItems: 'center',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
}}>
<Text>Header</Text>
<Text>Content</Text>
<Button title="Hide" onPress={() => _panel.hide()} />
</View>
</SlidingUpPanel>
</React.Fragment>
);
};
Related
When I use customized marker, the system starts to get heavy after a few processes. But if I use it without customization, there is no problem. I share a screenshot of my Marker's code, why I may have encountered such a problem.
So it's okay if I use the default marker. But if I designed it myself it works very slowly.
Number of Markers: 50
Library: react-native-maps, react-native-vector-icons/FontAwesome5
CLOSE:
tracksViewChanges={false} I solved the problem by adding Props to Marker
tracksViewChanges: Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance.
renderListMarker = () => {
let { markerList } = this.props;
return (
markerList.map((item, index) => {
return (
<Marker
onPress={() => { this.selectMarker(index) }}
key={item._id}
coordinate={{
latitude: item.location.coordinates[0],
longitude: item.location.coordinates[1],
}}
>
<View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ marginBottom: -18, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ marginEnd: 2 }}>
<FontAwesome5 name="parking" size={24} color={this.state.marker === index ? "#3879f0" : "#000000"} />
</View>
{
item.empty !== false ? <View style={{ padding: 2, borderRadius: 2, backgroundColor: item.empty > 0 ? '#00cc96' : '#e63946', }}>
<Text style={{ color: '#ffffff', fontWeight: 'bold', fontSize: 12 }}>{item.empty}</Text>
</View> : null
}
</View>
<View style={{ justifyContent: 'center' }}>
<FontAwesome5 name="sort-down" size={30} color={this.state.marker === index ? "#3879f0" : "#000000"} />
</View>
</View>
</Marker>
)
}
)
)
}
enter image description here
I'm trying to make two nested swipers on Android with React Native, using react-native-swiper. Each swiper works correctly when is separate, but when I add one to the other, the inner nested swiper doesn't show any content. It's a little bit weird, it recognized its children, I can swipe but Views are not rendered. Here is my simple demonstration example:
import React from 'react'
import {
Text,
View
} from 'react-native'
import Swiper from 'react-native-swiper'
const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
var styles = {
wrapper: {
backgroundColor: 'transparent'
},
innerSwiper: {
width: window.width,
height: window.height / 3,
marginTop: 60,
backgroundColor: '#92BBD9'
},
slide1: {
flex: 1,
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
}
export default () =>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<View style={styles.innerSwiper}>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
</View>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
Hi I am trying to design a screen in react native. If you see below screenshot here three views are there. a) image b) center view where text is appeared c) circle view
I want to expand center view width such it covers complete available space. I tried to do using flex property but couldn't make it. Does anyone know how to do it ?
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row" }}>
<Icon name="user" size={30} />
<Text
style={{
textAlignVertical: "center",
marginLeft: 20
}}
>
Ajay Saini
</Text>
</View>
<Text style={{ marginLeft: 50 }}>Hello</Text>
</View>
<View style={{ flexDirection: "row", width: "100%" }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
Since your circular view has flex: 1, it tries to occupy all the free space. Also, center view tries to do the same. Which results in splitting the free space evenly, therefore removing flex: 1 style from circular view will be enough.
Additionally, you can try adding a justifyContent: 'space-between' to most outer view. This is a great option to simplify more complicated designs.
<View style={{ flexDirection: 'row' }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
Try to change this part to flex: 2.
<View
style={{
// flex: 1,
flex: 2
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
I have recently started using React-Native, and one of the main issues I have been struggling with is the layout design.
I have a "Card" like component that holds some information about movies. Components like Image and Text that are big goes out of the bounds of the card and does not respect the padding and margins provided.
Here is the JSX code:
<View style={[styles.container, styles.card]}>
<View style={{alignSelf: 'stretch', flexDirection: 'row', padding: 10}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/sarah-avatar.png.jpeg')}/>
<View style={{flexDirection: 'column', marginTop: 5, marginLeft: 15}}>
<Text style={styles.title}>{ this.state.movie.name }</Text>
<Text style={{color: 'gray'}}>{ moment(this.state.movie.releaseDate).format('DD/MM/YYYY') }</Text>
</View>
</View>
<View style={{alignItems: 'center'}}>
<!-- THIS IMAGE DOES NOT RESPECT THE CARD BOUNDS -->
<Image style={{height: 220, resizeMode: 'center'}}
source={require('../../img/advance-card-bttf.png')}/>
<View style={{flexWrap: 'wrap', marginTop: 10, marginBottom: 20}}>
<Text style={{color: 'gray', fontSize: 14}}>
{ this.state.movie.summary }
</Text>
</View>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
<Button onPress={this.onLikeClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="thumbs-up" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.likes } Likes</Text>
</View>
</Button>
<View style={{width: 20}} />
<Button onPress={this.onCommentClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="comment" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.comments.length } Comments</Text>
</View>
</Button>
</View>
<Comments comments={this.state.movie.comments }
showComments={ this.state.showComments }
handler={this.handler} />
</View>
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
borderRadius: 2,
shadowColor: "#000000",
shadowOpacity: 0.3,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 0.3,
},
padding: 10,
flexWrap: 'wrap'
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
margin: 5
},
title: {
fontSize: 20,
backgroundColor: 'transparent'
},
button: {
marginRight: 10
}
});
And the comments component JSX code:
<View style={{flexDirection: 'column'}}>
{
this.props.comments.map((comment, index) => {
return (
<View key={index} style={{flexDirection: 'row', marginTop: 20}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/avatar-ts-woody.png')}/>
<View style={{flexDirection: 'column', marginLeft: 15, marginTop: 3}}>
<Text style={{fontSize: 18}}>{ comment.name }</Text>
<!-- THE COMMENT CONTENT GOES OUTSIDE OF THE CARD -->
<Text style={{color: 'gray'}}>{ comment.content }</Text>
</View>
</View>
)
})
}
<TextInput placeholder="Leave a comment"
value={this.state.commentContent}
onChangeText={(text) => this.setState({commentContent : text})}
onSubmitEditing={this.onCommentEntered.bind(this)}
style={{height: 40, marginTop: 18}} />
</View>
Here you can see that the cover image seems like it's out of the card:
In here each comment might start correctly inside the card, but will go outside of the bounds when text is too long:
how to bring the progress bar to the center of the screen like we do in android center in parent in relative layout and how to remove the warning message.How to change the visibility(invisible or gone or visible) in progressbar.
MyScreen
var ProgressBar = require('ProgressBarAndroid');
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{
backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center',
color: 'white', marginBottom: 30
}}>LOGIN</Text>
<ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} />
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
returnKeyType='next'
keyboardType='email-address'
onChangeText={(valUsername) => _values.username = valUsername}
/>
<TextInput
secureTextEntry={true}
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
onChangeText={(valPassword) => _values.password = valPassword}
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
<View>
<Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
Forgot Password
</Text>
<Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
SignUp
</Text>
</View>
</View>
As noted by #ravi-teja, use absolute positioning. Also, your warning arises because styleAttr is not a style attribute (the name is misleading) but a prop. You can also show and hide it programmatically using a boolean (myCondition) (that you can maybe store in your state). You should do something like this:
var ProgressBar = require('ProgressBarAndroid');
// ...
render(){
const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render.
return (
//...
{this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />}
//...
}
In addition to that and as others said, you should give a try to ActivityIndicator, since it works for both iOS and Android.