How to handle with zIndex?
I tried to specify the largest number from the scrollview, but it's still at the bottom(
Without ScrollView it looks like this, but I need to scroll up to image.
Thank you
This has been implemented in iOS as of 0.30 (see the commit changes) and in android in 0.31 (changes)
I have made a simple example component for how I have been using it:
'use-strict';
import React, { Component } from 'react';
const { View, StyleSheet } = require('react-native');
const styles = StyleSheet.create({
wrapper: {
flex:1,
},
back: {
width: 100,
height: 100,
backgroundColor: 'blue',
zIndex: 0
},
front: {
position: 'absolute',
top:25,
left:25,
width: 50,
height:50,
backgroundColor: 'red',
zIndex: 1
}
});
class Layers extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.wrapper}>
<View style={styles.back}></View>
<View style={styles.front}></View>
</View>
);
}
}
module.exports = Layers;
Related
I put a button in absolute position to on WebView.
This button works on any simulators and my iPhone 5s real device, but not work on iPhone Plus real device.
The button reacts when tapping, but doesn't fire onPress. It works when set position as relative.
All simulators and devices are same iOS version (12.2).
Does anyone know about this issue?
Environments
React Native 0.56
iOS 12.2
import React, { Component } from 'react';
import { ActivityIndicator, BackHandler, Keyboard, NetInfo, Platform, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View, WebView } from 'react-native';
import { Button, Icon } from 'react-native-elements'
export default class SignInScreen extends React.Component {
constructor(props) {
super(props)
}
handleBackPress() {
this.refs['WEBVIEW_REF'].goBack()
return true
}
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="white" barStyle="dark-content" />
<WebView
ref="WEBVIEW_REF"
bounces={false}
source={{ uri: 'https://example.com' }}
style={styles.container}
/>
<Button
onPress={this.handleBackPress.bind(this) }
buttonStyle={styles.buttonBack}
title=""
icon={{
name: 'chevron-left',
type: 'material-community',
iconStyle: { color: global.color.normal }
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
buttonBack: {
width: 45,
height: 45,
position: 'absolute',
left: 10,
bottom: 60,
backgroundColor: '#bfbfbf',
opacity: 0.9
},
container: {
flex: 1,
paddingTop: 25,
backgroundColor: '#fff'
},
});
Position absolute does not work properly in some cases at ios. you should wrap in a :
<View style={{position:'absolute',...other styles}}>
<Button/> // without position style
<View>
Use padding on your button,it will solve.
You need to use Dimensions in this case. For example in your case you can use it like this:
buttonBack: {
width: Dimensions.get('window').width/100*10,
height: Dimensions.get('window').height/100*10,
position: 'absolute',
left: Dimensions.get('window').width/100*2,
bottom: Dimensions.get('window').height/100*5,
backgroundColor: '#bfbfbf',
opacity: 0.9
},
Dimensions.get('window').width/100*10 means 10 percent of total device
screen width and same for height.
Dimensions work as device specific. So it will take the same position according to Device Screen Height and Width.
Fixed by wrapping absolute position View.
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="white" barStyle="dark-content" />
<WebView
ref="WEBVIEW_REF"
bounces={false}
source={{ uri: 'https://example.com' }}
style={styles.container}
/>
<View style={styles.navContainer}>
<Button
onPress={this.handleBackPress.bind(this) }
buttonStyle={styles.buttonBack}
title=""
icon={{
name: 'chevron-left',
type: 'material-community',
iconStyle: { color: global.color.normal }
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
buttonBack: {
width: 45,
height: 45,
left: 10,
backgroundColor: '#bfbfbf',
opacity: 0.9
},
// moved from buttonBack style
navContainer: {
position: 'absolute',
bottom: 60
},
//
container: {
flex: 1,
paddingTop: 25,
backgroundColor: '#fff'
},
});
When the View mounts, I would like the secondary view to be off the screen to the right of the main view.
When the user pan swipes left, the secondary view should follow the pan and eventually cover the main view. (like Instagram camera)
I have a basic structure set up, but I'm not sure how to finalize the <Animated.View> part. For example, do I put the pan handler on the main view or on the secondary view? I don't want the secondary view to cover any interactions on the main view.
import React from 'react';
import { PanResponder, Animated, Dimensions, StyleSheet, Text, View } from 'react-native';
const winWidth = Dimensions.get('window').width
const winHeight = Dimensions.get('window').height
class Main extends React.Component {
constructor(props){
super(props);
}
translateX = new Animated.Value(0);
panResponder = PanResponder.create({
onMoveShouldSetPanResponderCapture: (e, gs) => {
return gs.dx < 0 //allow left only
},
onPanResponderMove: (e, gs) => {
if(gs.dx < 0) {
Animated.event([null, {dx: this.translateX}])(e, gs)
}
},
onPanResponderRelease: (e, {vx, dx}) => {
//Secondary View should now cover the main View
},
onPanResponderTerminationRequest: (e, gs) => {
return false
},
onPanResponderTerminate: (e, {vx, dx} ) => {
},
})
render(){
return(
<View style={{styles.main}}>
<View style={{styles.secondary}}></View>
<View><Text>Other components will be displayed</Text></View>
</View>
)
}
}
const styles = StyleSheet.create({
main:{
flex:1,
flexDirection:'column',
backgroundColor: '#ffffff'
},
secondary:{
width: winWidth,
height: winHeight,
backgroundColor: 'red',
position: 'absolute',
top:0,
left:winWidth, //start off screen
},
})
I am not sure if this is what you are after but the way I did it was nesting two View inside the Animated.View Component which cover the full screen.
<Animated.View style={[this.position.getLayout(), {display: 'flex', flex: 1, flexDirection: 'row'}]} {...this.panResponder.panHandlers}>
<View style={{width: '100%', height: '100%', backgroundColor: 'yellow'}}>
<Text>
This is the Main view
</Text>
</View>
<View style={{ height: '100%', width: '100%', backgroundColor: 'red'}}>
<Text>
This is the invisible View
</Text>
</View>
</Animated.View>
The styling in the Views is to make each cover the full width
inside the Animated.View I used the array notation to apply two styles
this.position.getLayout() is the one that gives the coordinates/position of where the Animated.View component should be
The other styling object is so we can render the child views next to each other using flexbox particularly setting
Also attach the panHandlers to the Animated.View
constructor(props){
super(props)
position = new Animated.ValueXY()
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: ()=> true,
onPanResponderMove: (evt, gesture)=>{
//Need to set theshhold and state.isOpen to determine direction here
position.setValue({x: gesture.dx, y: 0})
},
onPanResponderGrant: ()=>{
this.position.setOffset({x: this.position.x._value, y: 0})
this.position.setValue({x: 0, y: 0})
},
onPanResponderRelease: ()=>{
this.openOrClose()
}
})
this.state = {isOpen: false}
this.panResponder = panResponder
this.position = position
}
I used state to monitor where the View Should move to this.state = {isOpen: false} depending on which view was visible.
The functions to move are mainly position.setValue({x: gesture.dx, y: 0}) which tracks the movement while the touch/pan is still active and this.openOrClose() which is called when the touch/pan is released.
The openOrClose function determines how to handle the movement and the main logic should be here. I just did a simple case and did not include any threshHold in this example.
To understand panHandlers I suggest you read this article as it explains the reasons for onPanResponderGrant best.
Below is the code for the working Component
import React, {Component} from 'react'
import {View, Text, Animated, PanResponder, Dimensions} from 'react-native'
const ScreenWidth = Dimensions.get('window').width
//Logic to flattenOffset required
export class Swipable extends Component{
constructor(props){
super(props)
position = new Animated.ValueXY()
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: ()=> true,
onPanResponderMove: (evt, gesture)=>{
//Need to set theshhold and state.isOpen to determine direction here
position.setValue({x: gesture.dx, y: 0})
},
onPanResponderGrant: ()=>{
this.position.setOffset({x: this.position.x._value, y: 0})
this.position.setValue({x: 0, y: 0})
},
onPanResponderRelease: ()=>{
this.openOrClose()
}
})
this.state = {isOpen: false}
this.panResponder = panResponder
this.position = position
}
openOrClose = ()=>{
this.position.flattenOffset()
//determine where to move depending onState
direction = this.state.isOpen ? 0 : -ScreenWidth
Animated.spring(this.position, {
toValue: {x: direction, y: 0}
}).start(()=>{
//Callback when animation is complete to show if open or closed
this.setState((prevState)=>{
return {isOpen: !prevState.isOpen}
})
})
}
render(){
return(
<Animated.View style={[this.position.getLayout(), {display: 'flex', flex: 1, flexDirection: 'row'}]} {...this.panResponder.panHandlers}>
<View style={{width: '100%', height: '100%', backgroundColor: 'yellow'}}>
<Text>
This is the Main view
</Text>
</View>
<View style={{ height: '100%', width: '100%', backgroundColor: 'red'}}>
<Text>
This is the invisible View
</Text>
</View>
</Animated.View>
)
}
}
I ran the above code on an Android emulator, I am sure it will work on ios. If there is anything I need to clarify or improve please do tell me
I'm trying to display a nested array containing numbers. The array has 6 elements (arrays). Each nested array contains 6 further elements/numbers. I'm trying to display each number in a Square component. I've got an error: this.props.inGrid.foreach is not a function.
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet } from 'react-native';
import Square from './Square';
import * as globalStyles from '../styles/global';
export default class Grid extends Component {
render() {
const row = [];
this.props.inGrid.foreach((r, i) => {
row.push(
<Square key={i} sqValue={r[i]} />
);
});
return (
<View style={styles.grid}>
{row}
</View>
);
}
}
Grid.propTypes = {
numbers: PropTypes.object
};
const styles = StyleSheet.create({
grid: {
backgroundColor: globalStyles.BG_COLOR,
flexDirection: 'row',
padding: 20,
justifyContent: 'center'
}
});
Below is the Square component:
import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as globalStyles from '../styles/global';
const Square = ({ sqValue }) => {
return (
<View style={styles.square}>
<Text>{sqValue}</Text>
</View>
);
};
Square.propTypes = {
sqValue: PropTypes.number
};
const styles = StyleSheet.create({
square: {
backgroundColor: globalStyles.BAR_COLOR,
width: 50,
height: 50,
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'red'
}
});
export default Square;
What am I doing wrong?
It appears that you're calling:
this.props.inGrid.foreach
but the function is actually called forEach
I'm using ReactNative to create an iOS app. But I encountered an error I don't know how to fix.
I wanted to create a button for navigating to another scene. I followed Dark Army's tutorial on RN navigation and used the source code provided. I double checked everything and all seemed fine. But the error I mentioned pops up.
Here's the code I have done so far:
Index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
} from 'react-native';
var Navigation = require('./DARNNavigator');
class QayProject extends Component {
render() {
return (
<Navigation></Navigation>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF5E7',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('QayProject', () => QayProject);
DARNNavigator:
'use strict';
import React , {Component} from 'react';
import{
View,
Navigator
} from 'react-native';
const FirstPage = require('./FirstPage');
const SecondPage = require('./SecondPage');
class DARNNavigator extends React.Component{
constructor(props) {
super(props);
}
render() {
var initialRouteID = 'first';
return (
<Navigator
style={{flex:1}}
initialRoute={{id: initialRouteID}}
renderScene={this.navigatorRenderScene}/>
);
}
navigatorRenderScene(route, navigator) {
switch (route.id) {
case 'first':
return (<FirstPage navigator={navigator} route={route} title="FirstPage"/>);
case 'second':
return (<SecondPage navigator={navigator} route={route} title="SecondPage"/>);
}
}
}
module.exports = DARNNavigator;
FirstPage:
import React, { Component } from 'react';
import{
View,
Navigator,
Button,
AppRegistry,
StyleSheet
} from 'react-native';
export default class FirstPage extends Component {
constructor(props) {
super(props);
this.state={ id:'first' }
}
render() {
return (
<View style={styles.container}>
<Button
onPress={this.props.navigator.push({ id:'second' })}
title="Next"
color="#FFB200"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
module.exports = FirstPage;
SecondPage:
import React, { Component } from 'react';
import {
View,
Text,
Navigator,
StyleSheet
} from 'react-native';
export default class SecondPage extends Component {
constructor(props) {
super(props);
this.state={
id:'second'
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Hello!
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
module.exports = SecondPage;
Don't use that library. They don't even have ONE single star on Github (not that it's the measure of a library's worth, I'm just saying there are more proven libraries available). The best and most straightforward I've found so far is "react-native-navigation" (https://github.com/wix/react-native-navigation). A lot of people like "react-native-router-flux" as well but I personally don't.
Sorry, I don't have time to read the code right now, I may later. But my suggestion for now is to try out react-native-navigation. It's seriously amazing.
I suggest to follow the official guide of React Native and use the built-in Navigator component.
Using Navigators React Native
I never saw that error, but if it will come after a lot of navigation steps, you should take a look at the resetTo function. It will clear the navigation stack. This makes sense for example when you are navigating back to the home screen of your app.
I need to set width and height of ListView. While setting width works as expected, setting height has no effect and ListView is always stretching into almost bottom of the screen (there is only margin between bootom of screen and bottom of ListView). I am creating ListView in render method this way:
<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />
This is its style:
stationsList: {
backgroundColor: 'white',
height: 0,
}
I have also tried to set its height in a method by this command:
this._stationsListFrom.setNativeProps({height: 200});
When I have tried to set width using this command, it worked. But setting height does nothing.
How can I set height of ListView (for example, in the case of TextInput its not a problem) to desired value? Only way I wound is to use bottom margin, but that is not the way I want to use.
I am testing on iOS only (for the case it works differently on Android).
My code:
import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
ListView,
Button,
View
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#D8CD36',
padding: 25
},
label: {
textAlign: 'left',
color: '#333333',
fontSize: 20,
margin: 5,
},
textInput: {
height: 40,
borderColor: 'black',
borderWidth: 2,
padding: 7,
},
stationsList: {
backgroundColor: 'white',
height: 0,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
menuButton: {
},
},
);
export default class TestApp extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Žilina', 'Košice', 'Vrútky']), };
}
render() {
return (
<View style={styles.container}>
<Text style={styles.label}>
Z
</Text>
<TextInput ref={component => this._textInputFrom = component} style={styles.textInput} placeholder="Východzia stanica" onChangeText={this.fromTextChange.bind(this)} onLayout={(event) => { this.correctMenuFromWidth(event.nativeEvent.layout) }} renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>} />
<Text style={styles.label}>
Do
</Text>
<TextInput style={styles.textInput} placeholder="Cieľová stanica"/>
<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Button onPress={this.menuFromButtonPressed} style={styles.menuButton} title={rowData} />} />
</View>
);
}
correctMenuFromWidth(layout) {
const {x, y, width, height} = layout;
this._stationsListFrom.setNativeProps({marginTop: -74, width: width});
}
menuFromButtonPressed() {
};
fromTextChange() {
this._textInputFrom.setNativeProps({text: 'Kraľovany'});
this._stationsListFrom.setNativeProps({height: 200});
};
}
AppRegistry.registerComponent('TestApp', () => TestApp);
Move ListView inside wrapper and set height to wrapper:
<View style={{height: 200}}>
<ListView .../>
</View>
From ScrollView docs (ListView uses ScrollView):
Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height.