I have a simple screen with an image and some text + a button on the bottom of the page. In portrait mode it looks good, but on landscape, the image, the text and the button are not displayed properly.
I am trying to make the image to adjust the size when the height is not enough but i cannot find a way to do that.
render() {
return (
<View style={styles.container}>
<View style={styles.bodyContainer}>
<Image style={styles.image}
source={require('./../../assets/images/server-info-icon.png')}
/>
<Text style={styles.serverDetailsText}>Server details</Text>
<Text style={styles.instructionText}>instruction</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight style={styles.gotItButton}
onPress={() => this.props.navigation.goBack(null)}>
<Text style={styles.gotItButtonText}>GOT IT</Text>
</TouchableHighlight>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
bodyContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
buttonContainer: {
height: 82
},
gotItButton: {
backgroundColor: COLORS.BUTTONS_COLOR,
height: 46,
width: 288,
borderRadius: 25,
alignSelf: 'center',
position: 'absolute',
bottom: 18
},
gotItButtonText: {
textAlign: 'center',
paddingTop: 11,
paddingBottom: 13,
fontSize: 17,
fontFamily: CONSTANTS.DEFAULT_FONT,
fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
color: COLORS.BUTTONS_TEXT_COLOR
},
image: {
maxHeight: 170,
maxWidth: 361,
marginBottom: 5
},
instructionText: {
color: COLORS.LABELS_COLOR,
fontSize: 15,
fontFamily: CONSTANTS.DEFAULT_FONT,
height: 36,
width: 206,
flexWrap: 'wrap',
textAlign: 'center',
marginTop: 2,
marginBottom: 2
},
serverDetailsText: {
color: COLORS.TEXT_COLOR,
fontSize: 17,
fontFamily: CONSTANTS.DEFAULT_FONT,
fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
width: 206,
textAlign: 'center',
marginTop: 2,
marginBottom: 2
}
})
Sample Code
<Image style={{flex: 1,
width: null,
height: null}}
source={require('myimage')}
/>
please add Outer View with style use flex. then Inner Flex Varies to 0.1 to 1.
Related
when creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.
import React, { Component } from 'react';
import {
View,Text,StyleSheet,ScrollView,Image, Animated, Dimensions
} from 'react-native';
HEADER_MAX_HEIGHT = Dimensions.get("window").height*0.4;
HEADER_MIN_HEIGHT = 70;
PROFILE_IMAGE_MAX_HEIGHT = 80;
PROFILE_IMAGE_MIN_HEIGHT = 40;
const IMAGE_SCALE_MAX = 20;
const LABEL_HEADER_MARGIN = 48;
import FastImage, { FastImageProps } from 'react-native-fast-image';
const AnimFastImage = Animated.createAnimatedComponent(FastImage);
class App extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
pan: new Animated.ValueXY()
};
}
render() {
return (
<ScrollView style={{
flex: 1,
width: '100%',
height: '100%',
backgroundColor: 'white'
}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
contentContainerStyle={{ padding: 0 }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.pan.y } } }],
{
useNativeDriver: false,
},
)}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="never"
scrollEventThrottle={1}
>
<AnimFastImage
animStyle={{
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [-100, 0],
extrapolate: 'clamp',
}),
},
{
scale: this.state.pan.y.interpolate({
inputRange: [-3000, 0],
outputRange: [IMAGE_SCALE_MAX, 1],
extrapolate: 'clamp',
}),
},
],
}}
source={{ uri: 'https://i.picsum.photos/id/1/400/400.jpg?hmac=lOytrN6lDOH_Yx7NwwGIaCtxp6pyuH2V4hD6Eac-VI0', priority: 'high' }}
style={styles.img}
resizeMode="cover"
/>
<Animated.View
style={{
paddingHorizontal: 16,
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [LABEL_HEADER_MARGIN * IMAGE_SCALE_MAX, -80],
extrapolate: 'clamp',
}),
},
],
}}>
<Text style={{ fontWeight: 'bold', fontSize: 20}}>
Trần thanh tung
</Text>
<View style={{ height: 700 }} />
</Animated.View>
</ScrollView>
)}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
img: {
backgroundColor: '#ccc',
width: '100%',
height: 350,
justifyContent: 'flex-end',
padding: 0,
},
});
But it doesn't work as I want it to. I want it to be like the user part of the telegram
what I want
I want to create a round Button for profile pic in React Native, but it did not work. The button should be round and clickable, and should have a pmg image inside it. What am I doing wrong here?
I used a blue background image, then on top op it TouchableOpacity wrapper for holding the image as button.
const Main = () => {
return (
// Container
<View style={styles.container} >
<ImageBackground
source={require('../images/background.png')}
style={styles.backgroundImage}>
<View>
<TouchableOpacity style={styles.profileButton}>
<Image source={require('../images/profilePicture/boy.png')} />
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
// paddingTop: '6%',
flex: 1,
},
backgroundImage: {
flex: 1,
resizeMode: "cover",
width: '100%',
height: '100%',
},
topBar: {
height: '40%',
// color : 'red',
// flex: 1,
// alignItems: 'stretch'
},
profileButton: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
alignItems: 'center',
justifyContent: 'center',
width: '13%',
height: 50,
// backgroundColor: '#fff',
borderRadius: 50,
},
});
export default Main;
Be sure to add image dimensions. Lol. I completely forgot that:
profileButton: {
borderWidth: 1,
// borderColor: 'rgba(0,0,0,0.2)',
width: '13%',
height: 50,
backgroundColor: '#fff',
borderRadius: 50,
padding: '1%',
margin: '1%',
},
profileImage: {
height: undefined,
width: undefined,
flex: 1
},
I succeeded in running the code provided by the site using react-native-maps-super-cluster.
However I cannot know how can I add my custom marker to the code.
How can I add my custom markers.
When I add my marker, it did not clustered.
The number of markers are exceed 1000+.
Dependencies are
"dependencies": {
"geolocation": "^0.2.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-geolocation-service": "^3.1.0",
"react-native-maps": "0.26.1",
"react-native-maps-super-cluster": "^1.6.0",
},
Bellows are current code.
import React, { Component } from 'react'
import {
Text,
View,
Image,
StyleSheet,
SafeAreaView,
TouchableOpacity,
} from 'react-native'
import { Marker, Callout } from 'react-native-maps'
import ClusteredMapView from 'react-native-maps-super-cluster'
import { generateRandomPoints, generateRandomPoint } from './generator'
const italyCenterLatitude = 37.521291,
italyCenterLongitude = 126.991733,
radius = 600000
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
pins: []
}
this.reload = this.reload.bind(this)
this.loadMore = this.loadMore.bind(this)
this.renderMarker = this.renderMarker.bind(this)
this.renderCluster = this.renderCluster.bind(this)
}
componentDidMount() {
this.reload()
}
reload = () => {
const pins = generateRandomPoints({ latitude: italyCenterLatitude, longitude: italyCenterLongitude }, radius, 50, this.state.pins.length)
this.setState({ pins: pins })
}
loadMore = () => {
const pins = generateRandomPoints({ latitude: italyCenterLatitude, longitude: italyCenterLongitude }, radius, 50, this.state.pins.length)
this.setState({ pins: this.state.pins.concat(pins) })
}
renderCluster = (cluster, onPress) => {
const pointCount = cluster.pointCount,
coordinate = cluster.coordinate,
clusterId = cluster.clusterId
return (
<Marker identifier={`cluster-${clusterId}`} coordinate={coordinate} onPress={onPress}>
<View style={styles.clusterContainer}>
<Text style={styles.clusterText}>
{pointCount}
</Text>
</View>
</Marker>
)
}
renderMarker = (pin) => {
return (
<Marker identifier={`pin-${pin.id}`} key={pin.id} coordinate={pin.location} />
)
}
render() {
return (
<SafeAreaView style={styles.container}>
{/* Cluster Map Example */}
<ClusteredMapView
style={{ flex: 1 }}
data={this.state.pins}
renderMarker={this.renderMarker}
renderCluster={this.renderCluster}
initialRegion={{ latitude: italyCenterLatitude, longitude: italyCenterLongitude, latitudeDelta: 12, longitudeDelta: 12 }}>
<Marker coordinate={{ latitude: 44.710968, longitude: 10.640131 }} pinColor={'#65bc46'} />
// Bellows are my marker. It do not clustered.
<Marker
coordinate={{ latitude: 37.5299448479299, longitude: 126.837746714377, }}
image={require('../gudu6/GuduIcon1w100.png')}
pinColor={'#65bc46'}
title=" 양천구 신월동 " description=" 228-1 번지" />
<Marker
coordinate={{ latitude: 37.58758812498327, longitude: 127.03790040097465, }}
image={require('../gudu6/GuduIcon1w100.png')}
pinColor={'#65bc46'}
title=" 동대문구 제기동 " description=" 1212 번지" />
<Marker
coordinate={{ latitude: 37.579331071917416, longitude: 127.04206659725423, }}
image={require('../gudu6/GuduIcon1w100.png')}
pinColor={'#65bc46'}
title=" 동대문구 제기동 " description=" 652-1 번지" />
</ClusteredMapView>
<View style={styles.controlBar}>
<TouchableOpacity
style={styles.button}
onPress={this.reload}>
<Text style={styles.text}>Reload</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={this.loadMore}>
<Text style={styles.text}>Load more</Text>
</TouchableOpacity>
</View>
<Image
resizeMode='contain'
source={require('./simbol.png')}
style={{ position: 'absolute', bottom: 26, right: 8, width: 64, height: 64 }} />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
clusterContainer: {
width: 30,
height: 30,
padding: 6,
borderWidth: 1,
borderRadius: 15,
alignItems: 'center',
borderColor: '#65bc46',
justifyContent: 'center',
backgroundColor: 'white',
},
clusterText: {
fontSize: 13,
color: '#65bc46',
fontWeight: '500',
textAlign: 'center',
},
controlBar: {
top: 48,
left: 25,
right: 25,
height: 40,
borderRadius: 20,
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 20,
backgroundColor: 'white',
justifyContent: 'space-between',
},
button: {
paddingVertical: 8,
paddingHorizontal: 20,
},
novaLabLogo: {
right: 8,
bottom: 8,
width: 64,
height: 64,
position: 'absolute',
},
text: {
fontSize: 16,
fontWeight: 'bold'
},
clusterContainer: {
width: 24,
height: 24,
borderWidth: 1,
borderRadius: 12,
alignItems: 'center',
borderColor: '#65bc46',
justifyContent: 'center',
backgroundColor: '#fff'
},
counterText: {
fontSize: 14,
color: '#65bc46',
fontWeight: '400'
},
calloutStyle: {
width: 64,
height: 64,
padding: 8,
borderRadius: 8,
borderColor: '#65bc46',
backgroundColor: 'white',
},
})
I think your issue is that you are defining each marker statically within your mapview component. The function you pass to the renderMarker prop will render a marker for each marker given to the data prop of the Mapview. This will allow the package to dynamically cluster your array of markers.
I'm trying to make the background of my BottomTabNavigator transparent.
I've tried setting the position to 'absolute', this makes the background transparent but now the tab bar is not clickable anymore. Does anyone knows a solution?
tabBarOptions: {
inactiveBackgroundColor : COLORS.TINTCOLOR,
activeBackgroundColor: COLORS.TINTCOLOR,
activeTintColor: COLORS.WHITE,
inactiveTintColor: COLORS.WHITE,
showLabel: false,
labelStyle: {
fontSize: 12
},
style: {
borderTopWidth: 0,
borderTopColor: COLORS.TINTCOLOR,
height: 50,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'transparent',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
overflow: 'hidden',
},
},
Hello I was wondering how to change the individual colors of each view. I want the color changes to follow a particular order, so I was thinking of using the Animate API, but I don' know where to go from there. Any ideas? Thanks in advance.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
TouchableOpacity,
Text,
Animated,
Easing,
StatusBar
} from 'react-native';
var Overlay = require('react-native-overlay');
export default class Shift extends Component {
render() {
return (
<View style={{flex:1}}>
<StatusBar hidden= {true}/>
<View style={styles.colorContainer}>
<View style={styles.bar0}></View>
<View style={styles.bar1}></View>
<View style={styles.bar2}></View>
<View style={styles.bar3}></View>
<View style={styles.bar4}></View>
<View style={styles.bar5}></View>
<View style={styles.bar6}></View>
</View>
<Text style={styles.shift}> Shift </Text>
<TouchableOpacity style={styles.startButton}>
<Text style={styles.buttonText}> Start </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
colorContainer: {
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
bar0 :{
backgroundColor: '#000000',
height: 670,
width: 55
},
bar1 :{
backgroundColor: '#0400ff',
height: 670,
width: 55
},
bar2 :{
backgroundColor: '#04ff00',
height: 670,
width: 55
},
bar3 :{
backgroundColor: '#00ffed',
height: 670,
width: 55
},
bar4 :{
backgroundColor: '#ff0000',
height: 670,
width: 55
},
bar5 :{
backgroundColor: '#ff00ff',
height: 670,
width: 55
},
bar6 :{
backgroundColor: '#ffee00',
height: 670,
width: 55
},
startButton:{
backgroundColor:'#000000',
position:'absolute',
marginLeft: 163,
marginTop: 400,
height:25,
width: 105
},
buttonText:{
color:'#FFFFFF',
textAlign: "center",
paddingBottom: 20,
paddingRight: 6,
paddingLeft: 5,
fontFamily: 'Courier',
fontSize: 30
},
shift:{
marginTop: 100,
marginLeft: 130,
position: 'absolute',
color: '#FFFFFF',
backgroundColor:'transparent',
fontSize: 60
}
});
AppRegistry.registerComponent('Shift', () => Shift);