I have yarn installed react-native-gesture-handler,I then cd'd into ios and pod installed. I then reran the react-native run-ios and still when I swipe nothing happens whatsoever. Im getting zero errors it just doesn't swipe whatsoever. Am i doing something wrong? I have tried to remedy this situation anyway possible and It just doesn't seem to swipe no matter what.
my code is as follows:
import React, {useState} from 'react';
import {
Platform,
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
flatList,
} from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const styles = StyleSheet.create({
container: {
padding: 20,
flexDirection: 'row',
backgroundColor: '#fff',
justifyContent: 'space-between',
alignItems: 'center',
},
text: {
fontSize: 18,
color: '#69696969',
},
icon: {
height: 30,
tintColor: '#69696969',
...Platform.select({
ios: {
tintColor: 'blue',
},
android: {
tintColor: 'red',
},
}),
},
separator: {
flex: 1,
height: 1,
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
});
export const Separator = () => <View style={styles.separator} />;
const LeftAction = () => {
<View>
<Text>test</Text>
</View>;
};
const ListItem = ({name, onFavoritePress}) => {
const [isFavorite, setIsFavorite] = useState(false);
let starIcon;
if (isFavorite) {
starIcon = Platform.select({
ios: require('../assets/icons/ios-star.png'),
android: require('../assets/icons/md-star.png'),
});
} else {
starIcon = Platform.select({
ios: require('../assets/icons/ios-star-outline.png'),
android: require('../assets/icons/md-star-outline.png'),
});
}
return (
<Swipeable renderLeftActions={LeftAction}>
<View style={styles.container}>
<Text style={styles.text}>{name}</Text>
{onFavoritePress && (
<TouchableOpacity
onPress={() => setIsFavorite((prevIsFavorite) => !prevIsFavorite)}>
<Image style={styles.icon} resizeMode="contain" source={starIcon} />
</TouchableOpacity>
)}
</View>
</Swipeable>
);
};
export default ListItem;
You need to link RNGH to RN
run react-native link react-native-gesture-handler
if this doesn't work maybe you don't have cocoapads dependencies
to install it
run cd <your-ios-code-directory> && pod install
Related
I'm struggling to find the good function with the new version of image picker.
i just wanna be able to pick a picture or take picture from the app.
My function :
function App (){
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
marginVertical: 24,
marginHorizontal: 24,
},
image: {
marginVertical: 24,
alignItems: 'center',
},
response: {
marginVertical: 16,
marginHorizontal: 8,
},
});
const [response, setResponse] = React.useState(null);
return (
<SafeAreaView>
<ScrollView>
<Button
title="Take image"
onPress={() =>
ImagePicker.launchCamera(
{
mediaType: 'photo',
includeBase64: false,
maxHeight: 200,
maxWidth: 200,
},
(response) => {
setResponse(response);
},
)
}
/>
<View style={styles.response}>
<Text>Res: {JSON.stringify(response)}</Text>
</View>
{response && (
<View style={styles.image}>
<Image
style={{width: 200, height: 200}}
source={{uri: response.uri}}
/>
</View>
)}
</ScrollView>
</SafeAreaView>
);
}
also my error :
TypeError: null is not an object (evaluating '_reactNative.NativeModules.ImagePickerManager.launchCamera')
Looks like a problem with your linking for the library.
Note : Make sure you are on version 3.x.x and to clean the cache
Steps to install
npm install react-native-image-picker
npx react-native run-android
And then use the launchCamera like
import {launchCamera} from 'react-native-image-picker'
Then launchCamera(options?, callback);
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 building my first react-native app, and Implementing tabs using react-native-tabview. Stuck with the error :
"TypeError: undefined is not an object (evaluating '_this.props.navigationState.routes.length').
This is a screenshot of error I'm getting.
import * as React from 'react';
import {
Platform, StyleSheet, Text, View, Dimensions, StatusBar, FlatList, ImageBackground, TextInput
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
export default class App extends React.Component {
state = {
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
],
};
render() {
return (
<View style={styles.container}>
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
style={styles.container}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: StatusBar.currentHeight
},
scene: {
flex: 1,
},
});
So I copy/pasted and ran your code (with a different background color) as an expo snack here: https://snack.expo.io/B1-xKYu2N and it's working.
If this is your first project, the most likely issue is missing or incorrectly installed packages. Double check your package.json for something like "react-native-tab-view": "^2.0.1". If it's there (or after you add it), try running rm -rf ./node_modules && npm install in terminal from inside the project directory to delete the packages and re-install them. Wish I could be more help!
I get this error. I am in Windows 10 and using expo sumulator in iphone 6 plus when I try to make run Camera. I try to follow the steps in this tutorial:
1 - npm install react-native-camera --save
2 - In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
3 - Go to node_modules ➜ react-native-camera and add RNCamera.xcodeproj
4 - In XCode, in the project navigator, select your project. Add libRNCamera.a to your project's Build Phases ➜ Link Binary With Libraries
5 - Click RNCamera.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). In the Search Paths section, look for Header Search Paths and make sure it contains both $(SRCROOT)/../../react-native/React and $(SRCROOT)/../../../React - mark both as recursive.
The problem is that I am in Windows and in windows XCODE doesn't exist. How do i fix this in Windows?
Please Give to me Some help. thank you...
My code is:
import React, { Component } from 'react';
import {Text, View,TouchableOpacity,TouchableHighlight} from 'react-native';
import Camera from 'react-native-camera';
const myStyle = {
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: 'red',
padding: 10,
margin: 40
}
};
export default class CameraAcess extends Component {
constructor(props){
super (props);
this.state = {hasCameraPermission: null, type: Camera.Constants.Type.back,};
}
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
const {container,capture,preview} = myStyle;
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View/>;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={this.state.type}>
<View style={{flex: 1, backgroundColor: 'transparent', flexDirection: 'row', justifyContent:'space-between'}}>
<TouchableOpacity style={{flex: 0.1, alignSelf: 'flex-end', alignItems: 'center',}}
onPress={() => {this.setState({type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front : Camera.Constants.Type.back,});}
}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>{' '}Flip{' '}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.props.navigator.push({id: 'MenuPrincipal'});}}
style={{alignSelf: 'flex-end', alignItems: 'center', backgroundColor:'transparent'}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' ,}}>[Back]</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
}
I have this very strange bug on my react-native iOS app, when I'm using NavigatorIOS (need it) : there is a 30 points zone on the left of the screen that is not touchable on the first touch (nothing happens on touchableHighlight or TouchableWithoutFeedback) in Listview elements for example...
When I use Navigator, no problem at all, it's specific to NavigatorIOS (and I need it in this part of the app), also tried without any style, same problem.
Haven't seen any github issue or discussion about this bug.
Edit :
Runnable example : https://rnplay.org/apps/E0R2vg
Component code sample:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
ListView,
TouchableWithoutFeedback,
Dimensions,
} = React;
var myListView = React.createClass({
getInitialState: function() {
return {
ds: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
},
componentDidMount: function() {
console.log('feed datasource');
this.setState({
ds: this.state.ds.cloneWithRows([{name: 'one'}, {name:'two'}, {name: 'three'}]),
});
},
render: function() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.ds}
renderRow={this.renderItem}
style={styles.listView}
/>
<TouchableWithoutFeedback onPress={this.nextroute}>
<View style={[styles.pressme, {flex:1}]}>
<Text>Next route to see the issue</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
},
renderItem: function(item) {
return (
<View style={styles.row}>
<TouchableWithoutFeedback onPress={() => alert('pressed')}>
<View style={styles.pressme}>
<Text>x</Text>
</View>
</TouchableWithoutFeedback>
<Text>{item.name} - Item description...</Text>
</View>
);
},
nextroute: function() {
this.props.navigator.push({
title: 'Try press [x] (twice)',
component: myListView,
onLeftButtonPress: () => this.props.navigator.pop(),
});
},
});
var SampleApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.navcontainer}
initialRoute={{
component: myListView,
title: 'First view is ok',
}}
tintColor="#000000"
barTintColor="#fd7672"
translucent={false}
ref='navios'
/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 28,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
fontSize: 19,
marginBottom: 5,
},
navcontainer: {
flex: 1,
},
listView: {
flex: 1,
width: Dimensions.get('window').width,
},
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
pressme: {
margin: 10,
borderWidth: 1,
borderColor: 'red',
padding: 15,
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);