Error undefined is not an object(evaluating 'RCTLinkingManager,openURL')
The documentation says LinkingIOS is being deprecated. Use Linking instead. Yet there is nothing else about that and all references are to LinkingIOS
var {Image, View, Text, ScrollView, BackAndroid, StyleSheet, LinkingIOS} = React;
render: function() {
var url = 'http://google.com';
return (
<View style={property.color}>
<Image source={require('../img/glow2.png')} style={property.container}>
<Navbar
title="Property Info"
subtitle=""
style={property.toolbar}
subtitleStyle={property.subtitle} />
<ScrollView style={{marginBottom: 55, backgroundColor: 'transparent'}}>
<View style={property.propertyContent}>
<Icon name="android-checkbox-outline" size={20} color="rgba(255,255,255,0.9)" style={{position: 'absolute',top:0, left: 0}}/>
<Text style={property.content}>url {url} </Text>
<Text style={{color: 'yellow'}}
onPress={() => LinkingIOS.openURL(url)}>
Google</Text>
</ScrollView>
</Image>
</View>
);
}
NOTE: LinkingIOS is being deprecated. Use Linking instead.
This means you should be using Linking as a reference in your code rather than LinkingIOS.
Related
Am building a carousel project using react native,
the code worked perfectly when i used only images ,before adding the sections "image" "title" in data
I get this error "Error while updating property 'src' of a view managed by: RCTImageView" after this code , i tried many possible methods but still no result.
import * as React from 'react';
import { StatusBar, FlatList, Image, Animated, Text, View, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
const { width, height } = Dimensions.get('screen');
const data = [
{imageUrl:'https://images.unsplash.com/photo-1509023464722-18d996393ca8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
title: "Hope"},
{imageUrl:'https://images.unsplash.com/photo-1494587351196-bbf5f29cff42?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80',
title: "Hope2"},
{imageUrl:'https://images.unsplash.com/photo-1439792675105-701e6a4ab6f0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80' ,
title: "Hope3"}
];
export default () => {
const scrollX=React.useRef(new Animated.Value(0)).current;
return (
<View >
<StatusBar hidden />
<View
style={StyleSheet.absoluteFillObject}>
{data.map((image,index)=>{
const inputRange=[
(index -1)*width,
index*width,
(index+1)*width
]
const opacity = scrollX.interpolate({
inputRange,
outputRange:[0,1,0]
})
return <Animated.Image
key={'image-${index}'}
source={{uri:image}}
style={[
StyleSheet.absoluteFillObject,
{opacity}
]}
/>
})}
</View>
<Animated.FlatList
data={data}
onScroll={Animated.event(
[{nativeEvent:{contentOffset:{x:scrollX}}}],
{useNativeDriver: true}
)}
keyExtractor={(_,index)=> index.toString()}
renderItem={({item})=> {
return <View >
<Text style={{color:'white'}}> {item.title} </Text>
<Image source={{uri:item.imageUrl}}
/>
</View>
}}
/>
</View>
);
};
Try this. Update source in Animated.Image to image.ImageUrl instead of just "image"
<Animated.Image
key={'image-${index}'}
source={{uri:image.imageUrl}}
style={[
StyleSheet.absoluteFillObject,
{opacity}
]}
/>
I am new to react-native as well as to android, upon clicking of button, I get an undefined response when I try to access values referenced in TextInput
Upon looking on previous solution, I tried binding my log in button and still the problem was not solved
function login(event)
{
var email = this.refs.email;
var password = this.refs.password;
console.log(email + ": " + password); // gives undefined: undefined
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Image source={require('./logo.png')} />
<Text style={styles.welcome}>Login</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1, width: 300}}
placeholder={'E-mail'}
ref = {this.email}
onChangeText={(text) => this.setState({text})}
/>
<Text>{"\n"}</Text>
<TextInput secureTextEntry={true}
style={{height: 40, borderColor: 'gray', borderWidth: 1, width: 300}}
placeholder={'Password'}
ref = {this.password}
onChangeText={(text) => this.setState({text})}
/>
<Text>{"\n"}</Text>
<Button
title="Log In"
onPress={login.bind(this)}
/>
</View>
);
}
}
Usage of this.refs is deprecated.
Work with refs as function. For example:
export default class App extends Component {
let viewRef = null;
render() {
return (
<View ref={ref => (this.viewRef = ref)}>
<Button
title="Log In"
onPress={() => console.log(this.viewRef)}
/>
</View>
)
}
}
Consider a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.
So far,I've managed to get the results to display using the ListView components in rows (i.e. 2 result per row, see screenshot).
in one row.both the grids display data of a single person,i want
details in a consecutive manner not repeating.
</Content>
<View style={{backgroundColor: 'white'}}>
<Text style={{color: 'black',fontSize: 17,marginTop: 25,marginLeft: 15}}>Employees</Text>
</View>
<List dataArray={currentContext.props.employeeList}
renderRow={(data) =>
<ListItem>
{this.renderRow(data)}
</ListItem>
} />
</Content>
The function renderRow(data) is given by
renderRow(data){
return(
typeOne()
)
function typeOne(){
return(
<View style={styles.gridContainer}>
<Content contentContainerStyle={{
padding:6,
paddingBottom:0
}}>
<View style={{flex:1,}}>
<Row>
{renderCell(data.photo_url, 0,data.name)}
{renderCell(data.photo_url, 1,data.name)}
</Row>
</View>
</Content>
</View>
)
function renderCell(bg,pos,title){
if (pos%2==0) {
return(
<Col style={[{marginRight:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}else{
return(
<Col style={[{marginLeft:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}
function cellContent(bg,title){
if(bg==null){
return null
}
return(
<Button style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View style={styles.cellContent}>
<Image style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>
)
}
}
}
}
How can get the list-view to return 2 data's per row ?
I will give you similar question for reference in the below link
ListView grid in React Native
please help me solve this issue.
The style part
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'white',
},
button:{
color:'white'
},
overLayView: {
position:'absolute',
alignSelf:'center',
},
gridContainer: {backgroundColor:'#EDF0F2',flex:1,},
colStyle:{height:210,flex:1,marginBottom:6,marginRight:10,marginLeft:10},
cellContent:{position:'absolute',left:0,right:0,top:0,bottom:0},
cellTitleBg:{bottom:65,backgroundColor:'#778899',height:35},
cellTitle:{bottom:65,color:'white',fontWeight:'bold',fontSize:17,right:0,textAlign:'right',right:0}
})
Maybe use a wrapper library, I recommend this one: https://www.npmjs.com/package/react-native-easy-listview-gridview
Try this out...
pass index from the renderRow function down to this function where this view is defined.
<Button key={index} style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View key={index} style={styles.cellContent}>
<Image key={index} style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View key={index} style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text key={index} style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>
Thanks for your reading,I am a beginner into React Native,I find a similar question title on this site, but my question is different from that.
I use TouchableHighlight to press to open a new screen,I have succeeded. But the button did not change color. is that normal?
There are some of my try:
I try to use TouchableOpacity:The button will change it opacity and then open new screen
I also try to use TouchableNativeFeedback:The button behaves normally once，when i tap second time it has no behavior unless i have a long press.
when i use the button to do something else, not to open a new screen, it behaves correctly.
Here is my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
} from 'react-native';
import MyInfoOrder from './MyInfoOrder';
export default class MyInfo extends React.Component{
_onPress(){
console.log("tap");
}
_onPressMessage(){
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'order',
component: MyInfoOrder,
})
}
}
render(){
return(
<View style={styles.btnGroup}>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPressMessage.bind(this)}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/message.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/friends.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/col.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
btnGroup:{
marginBottom:30,
borderRadius:10,
backgroundColor:'#FFFFFF',
},
btnItem:{
height:104,
borderRadius:10,
},
btnItemView:{
borderRadius:10,
backgroundColor:'#FFFFFF',
height:106,
flexDirection:'row',
alignItems:'center',
},
btnItemViewImage:{
width:48,
height:48,
marginLeft:24,
marginRight:24
},
btnItemViewText:{
flex:1,
fontSize:32,
color:'#333333',
},
btnItemViewArrow:{
width:30,
height:30,
marginRight:30
},
})
I use:
"react": "15.4.2",
"react-native": "0.41.2",
platform：android 6.0
Adjust "delayPressIn" props in TouchableHighlight to 0 and everything work as expected.
if you want change color of TouchableHighlight when pressed you need to add
underlayColor in props
I'm referring to this in my index.android.js file..
<View>
<CustomView>
...
</CustomView>
</View>
This can be done by React.findNodeHandle.
In your case,
...
var { findNodeHandle } = React;
...
render: function() {
return (
<View>
<CustomView ref="customView">
...
</CustomView>
</View>
);
},
somethingLikeComponentDidMount: function() {
var customViewNativeID = findNodeHandle(this.refs.customView);
// Something else...
}
...
might do the work.
For a working example (natively binding two components), check out here as the JS part and here as the native Java part.
do use refs for the component which can act as the reference for the component
ex:
<View>
<TextInput style={styles.textInput}
ref={'usrname'}
placeholder={'Username'}
placeholderTextColor={'red'}
onChangeText={(userName) => this.setState({userName})}
value={this.state.userName} />
<TouchableOpacity onPress={this._onPressButton}>
<View style={styles.buttonContainer}>
<Text> Submit </Text>
</View>
</TouchableOpacity>
</View>
and onPress:
_onPressButton: function(e){
var x = this.state.userName;
alert(x); //we can also use alert(this.state.userName)
},