how do I open another file using the on-press function, I would like to open a JavaScript file from my home screen in the app, basically, I want to be able to press the button and connect to my other javascript file from my first touchable-opacity
here is the code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity, Dimensions,Button} from 'react-native';
import {createStackNavigator,} from 'react-navigation';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const App = StackNavigator({
Home: { './video1.js' },
Profile: { screen: ProfileScreen },
});
export default class App extends Component {
render() {
return (
<View style={{flexDirection: "row"}}>
<ImageBackground source={{uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576'}}
style={{width: width, height: height,}}>
<TouchableOpacity style={styles.spiderman} onPress={() =>
navigate{'Profile'}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 190, height:250,}} />
</TouchableOpacity>
<TouchableOpacity style={styles.panther}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/a/a0/Usa_avengers_herochi_blackpanther_r_e1954416.png/revision/latest?cb=20170417131405'}}
style={{width: 190, height: 300, }} />
</TouchableOpacity>
<TouchableOpacity style={styles.hulk}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 225, height: 350}} />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
Related
import { Text, View, Image, StyleSheet } from 'react-native';
import * as react from 'react';
export default function TabOneScreen(){
return (
<View style={styles.container}>
<Image source = {{uri:'https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/elon.png'}} style={styles.image} />
my task is to give space to this text which is supposed to appear in a straight line (Elon Musk
11:11AM) using justifyContent: 'space-between' but its not having any effect instead the text are still together (Elon Musk11:11AM)
<View style={styles.row}>
<Text style={styles.name}>Elon Musk</Text>
<Text style={styles.text}>11:11 AM</Text>
</View>
<Text style={styles.text}>Boi Ice for Janet</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container:{
flexDirection:'row',
padding:10,
},
image:{
height:60,
width:60,
borderRadius:50,
marginRight:10,
},
name:{
fontSize:20,
color:'blue',
},
row:{
flexDirection:'row',
justifyContent: 'space-between',
},
text:{
fontSize:20,
color:'blue'
}
});
You would need to use a
row:{
flex:1
// other keys
}
and/or
row:{
width:'100%'
}
so that the view (row) covers the width of the screen.
If I change the state of an image source to "null", the image should disappear, but it doesn't. This issue happens on IOS, but works correctly on Android. I'm using RN v 0.64.2. On a previous version, 0.60.1, this worked correctly for both platforms.
Edit: Also tried with the latest RN version, 0.66.4, and it still doesn't work correctly.
I have created a very simplified test app that reproduces this issue. Code below:
import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, Pressable} from 'react-native';
class App extends Component {
constructor (props) {
super(props);
this.state = {
image_source: require('./test.png')
}
}
removeImage = () => {
this.setState({image_source: null});
//this.setState({image_source: require('./test2.png')});
}
checkImage = () => {
alert(this.state.image_source);
}
render() {
return (
<View>
<Text style={{marginTop: 200}}>
test text
</Text>
<Image
style={{width: 100, height: 100}}
source={this.state.image_source}
/>
<Pressable
style={{width: 80, height: 25, backgroundColor: 'blue'}}
onPress={() => this.removeImage()}
>
</Pressable>
<Pressable
style={{width: 80, height: 25, backgroundColor: 'red'}}
onPress={() => this.checkImage()}
>
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
})
export default App;
Clicking the blue rectangle changes the state of the image source to "null" and the image should disappear, but doesn't. The red rectangle verifies the state was changed to "null". I'm able to switch to a different image; that works correctly, just can't remove it.
Try to set image in component life cycle
import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, Pressable} from 'react-native';
class App extends Component {
constructor (props) {
super(props);
this.state = {
image_source:null
}
}
componentDidMount(){
this.setState({image_source: require('./test.png')});
}
removeImage = () => {
this.setState({image_source: null});
//this.setState({image_source: require('./test2.png')});
}
checkImage = () => {
alert(this.state.image_source);
}
render() {
return (
<View>
<Text style={{marginTop: 200}}>
test text
</Text>
<Image
style={{width: 100, height: 100}}
source={this.state.image_source}
/>
<Pressable
style={{width: 80, height: 25, backgroundColor: 'blue'}}
onPress={() => this.removeImage()}
>
</Pressable>
<Pressable
style={{width: 80, height: 25, backgroundColor: 'red'}}
onPress={() => this.checkImage()}
>
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
})
export default App;
if this do not help, we often used this package for projects
https://www.npmjs.com/package/react-native-fast-image
I am trying to detect touch on a view in React Native. I followed this link and incorporated the Touchable around my styled view like so:
<TouchableWithoutFeedback onPress={cardPressed}>
<View style={styles.card}>
<Text style={styles.card_Head}>What is Something?</Text>
<Text style={styles.card_Body}>Something</Text>
</View>
</TouchableWithoutFeedback>
I am using a functional component, so after export default function App() { I have:
function cardPressed()
{
console.log('pressed');
}
No errors, but I get nothing. What is wrong w this implementation?
Check your import. You should import TouchableWithoutFeedback from react-native and not from react-native-gesture-handler
Check out this code.
import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const cardPressed = () => {
console.log('pressed');
setCount(count + 1);
};
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text style={styles.countText}>Count: {count}</Text>
</View>
<TouchableWithoutFeedback onPress={cardPressed}>
<View style={styles.button}>
<Text style={styles.card_Head}>What is Something?</Text>
<Text style={styles.card_Body}>Something</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
},
countText: {
color: "#FF00FF"
},
card_Head: {
fontWeight: 'bold',
fontSize: 24
},
card_Body: {
fontStyle: 'italic'
}
});
export default App;
I am developing ios action extension using react-native. I have created it but when i'm trying to open extension from another app e.g safari or chrome it not showing the UI for extension instead it shows blank screen. If any one know how to create UI for extension and communicate with host app, please let me know. How we debug the extension when opened from another app?. I have referred below example.
https://github.com/promptworks/react-native-action-extension-example.
Thanks in advance.
Below is my index.js file
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export class AppComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
export class ActionExtensionComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to our Action Extension!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
export default class RNShare extends Component {
static propTypes = {
isActionExtension: PropTypes.bool.bool
}
static defaultProps = {
isActionExtension: false
}
render() {
if (this.props.isActionExtension) {
return <ActionExtensionComponent />
} else {
return <AppComponent />
}
}
}
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,
},
});
AppRegistry.registerComponent('RNShare', () => RNShare);
I'm Using react 15.2.1 and react-native 0.30.0
I checked out How do I display an animated gif in React Native? and followed the instructions.
<Image source={{ uri: 'http://i.giphy.com/l41YiEvBtjGKNlzby.gif'
style={{ height: 250, width: 250 }} />
Also tried
<Image source={require('./path/to.gif')}
style={{ height: 250, width: 250 }} />
But the gif isn't showing. If I switch out the link for an image it works fine.
I checked this working example https://rnplay.org/apps/739mzQ but can't test it with 0.30.0 so I'm wondering if something has changed since then.
Maybe add gif to your project and use require function.
please try this example
import React, {Component} from 'react';
import { StyleSheet, View} from 'react-native';
const SplashGif = require('./images/Wallpaper.gif');
export default class App extends Component {
render() {
const { container, imageStyles } = styles;
return (
<View style={container}>
<Image source={SplashGif} style={imageStyles} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
imageStyles: {
resizeMode: 'stretch',
width: '100%',
height: '100%'
}
});
Use this code:
import React, {Component} from 'react';
import { StyleSheet, Image,Text, View} from 'react-native';
const Splash = require('./images/testGif.gif')
class SplashSrceen extends Component {
render() {
const { container, splashgif } = styles;
return (
<View style={container}>
<Image source={Splash} style={splashgif} />
<Text>or</Text>
<Image source={{uri:'https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif'}}style={splashgif} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
splashgif: {
resizeMode: 'stretch',
width: '100%',
height: '50%'
}
});
export default SplashSrceen ;
Android
To correct for this, we included the following libraries:
dependencies {
implementation 'com.facebook.fresco:fresco:1.10.0'
implementation 'com.facebook.fresco:animated-gif:1.10.0'
}