Related
I am following the below tutorial and trying to implement the react native bottom sheet in my Home Screen.
I used all his codes but still I am not able to open the bottom sheet when I click the filters button
Providing the video tutorial, GitHub link and my code below below
Its throwing an error at this line —> bs = React.createRef();
Can you let me know how to fix it
https://www.youtube.com/watch?v=mjJzaiGkaQA
https://github.com/itzpradip/Food-Finder-React-Native-App/blob/master/screens/EditProfileScreen.js
import 'react-native-gesture-handler';
import React, {useRef, useState} from 'react';
//import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import MapView from 'react-native-map-clustering';
import Autocomplete from 'react-native-autocomplete-input';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
//import {Button} from 'react-native';
import {
Image,
LogBox,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {Button, Menu, Provider} from 'react-native-paper';
import DropDownPicker from 'react-native-dropdown-picker';
//import { Input } from 'react-native-elements';
//import Geolocation from 'react-native-geolocation-service';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
LogBox.ignoreAllLogs();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
const data = ['dropdown1', 'drop down 2', 'a drop down'];
const AuthStack = () => {
return (
<Drawer.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="HomeScreen2" component={HomeScreen2} />
{/* <Stack.Screen name="HomeScreen7" component={HomeScreen7}/>
<Stack.Screen name="HomeScreen8" component={HomeScreen8}/> */}
</Drawer.Navigator>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen
name="Main"
component={Main}
options={{headerShown: false}}
/>
<Stack.Screen name="AuthStack">{() => <AuthStack />}</Stack.Screen>
{/* <AuthStack /> */}
{/* <Stack.Screen name="OnboardingScreen" component={OnboardingScreen} /> */}
</Stack.Navigator>
</NavigationContainer>
);
};
const Main = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<View style={{}}>
<Text style={{fontSize: 30, fontWeight: 'bold', color: '#20315f'}}>
GAMEON
</Text>
</View>
<TouchableOpacity
onPress={() => navigation.navigate('AuthStack')}
style={{
backgroundColor: '#AD40AF',
padding: 20,
flexDirection: 'row',
justifyContent: 'space-between',
color: '#fff',
width: '90%',
marginBottom: 50,
}}>
<Text
style={{
color: '#fff',
fontWeight: 'bold',
}}>
Let's Begin
</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
const Home = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<Text style={{fontSize: 30, fontWeight: 'bold', color: '#20315f'}}>
Home
</Text>
</View>
);
};
const HomeScreen2 = () => {
return (
<View style={styles.container}>
<MapView
// provider={PROVIDER_GOOGLE}
// remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}></MapView>
{/* <View style={styles.searchBox}>
<TextInput
placeholder="Search here"
placeholderTextColor="#000"
autoCapitalize="none"
style={{flex: 1, padding: 0}}
/>
</View> */}
<View style={styles.searchBox}>
<Autocomplete
//onChangeText={}
/>
</View>
</View>
);
};
const HomeScreen = ({navigation}) => {
bs = React.createRef();
fall = new Animated.Value(1);
// renderInner = () => (
// <View style={styles.panel}>
// <View style={{alignItems: 'center'}}>
// <Text style={styles.panelTitle}>Upload Photo</Text>
// <Text style={styles.panelSubtitle}>Choose Your Profile Picture</Text>
// </View>
// <TouchableOpacity style={styles.panelButton} onPress={takePhotoFromCamera}>
// <Text style={styles.panelButtonTitle}>Take Photo</Text>
// </TouchableOpacity>
// <TouchableOpacity style={styles.panelButton} onPress={choosePhotoFromLibrary}>
// <Text style={styles.panelButtonTitle}>Choose From Library</Text>
// </TouchableOpacity>
// <TouchableOpacity
// style={styles.panelButton}
// onPress={() => this.bs.current.snapTo(1)}>
// <Text style={styles.panelButtonTitle}>Cancel</Text>
// </TouchableOpacity>
// </View>
// );
// renderHeader = () => (
// <View style={styles.header}>
// <View style={styles.panelHeader}>
// <View style={styles.panelHandle} />
// </View>
// </View>
// );
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: '#fff',
}}>
<View
style={{
flex: 0.4,
zIndex: 100,
elevation: 1000,
}}>
<ScrollView
showsHorizontalScrollIndicator={false}
horizontal={true}
contentContainerStyle={{
alignItems: 'center',
flexDirection: 'row',
}}>
<View
style={{
margin: 10,
flex: 1,
zIndex: 100,
}}>
<TouchableOpacity onPress={() => this.bs.current.snapTo(0)}>
<Text>filters</Text>
</TouchableOpacity>
{/* <BottomSheet
ref={this.bs}
snapPoints={[330, 0]}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
initialSnap={1}
callbackNode={this.fall}
enabledGestureInteraction={true}
/> */}
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
const INITIAL_REGION = {
latitude: 52.5,
longitude: 19.2,
latitudeDelta: 8.5,
longitudeDelta: 8.5,
};
const styles = StyleSheet.create({
container: {
// ...StyleSheet.absoluteFillObject,
// justifyContent: 'flex-end',
// alignItems: 'center',
flex: 1,
},
searchBox: {
position: 'absolute',
left: 150,
marginTop: Platform.OS === 'ios' ? 8 : 4,
// flexDirection: 'row',
backgroundColor: '#fff',
width: '60%',
alignSelf: 'center',
borderRadius: 5,
//padding: 5,
//shadowColor: '#ccc',
height: '4%',
// marginLeft: 249,
shadowOffset: {width: 0, height: 3},
//shadowOpacity: 0.5,
// shadowRadius: 5,
//elevation: 10,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;
Your mistake is here.
You can't use "this" with functional components. If you use bs.current.snapTo(0), it will open the sheet.
I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this?
(https://i.stack.imgur.com/1c0M6.jpg) have tried KeyboardAvoidingView and react-native-keyboard-aware-scroll-view but the problem still persist
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-
navigation';
import { KeyboardAwareView } from 'react-native-keyboard-aware-
view';
import { AsyncStorage } from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
<View style={styles.container}>
<ScrollView style={{flex: 1}}>
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={styles.formContainer}>
<ScrollView style={{flex:1}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</ImageBackground>
</ScrollView>
</View>
</KeyboardAwareView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
height: "30%"
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
I checked and modify your code in react native ios. The following code might be helpful for you.
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Dimensions,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
let {height, width} = Dimensions.get('window');
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView behavior={"padding"} enabled style= .
{{flexGrow:1,height:'100%'}}>
<ScrollView bounces={false} >
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: height}} source={require('./bg.jpg')}>
<View style={{flex:1}}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={{flex:2}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</View>
</ImageBackground>
</ScrollView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
// height:'30%'
flex:1
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
If you run the above code in android then change behavior={"height"}
ListView scrolling working perfect on Android but on IOS when i try to scroll down from bottom of screen it is not recognising touch and not scrolling down while scrolling from top of listView is working. Below is code snippet.
render()
{
return(
<View style={styles.MainContainerViewCamp}>
<View>
<View>
<TextInput />
</View>
<View>
<TouchableOpacity>
</TouchableOpacity>
</View>
</View>
<View style = {{ flex:1 }}>
<ScrollView horizontal={true}>
<ListView
...
renderRow {(rowData) =>
<View style={{ flex: 1, flexDirection: 'row' }}>
</View>
}
/>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
MainContainerViewCamp:
{
justifyContent: 'center',
flex: 1,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
});
I have applied {flex:1} to the root views and all other possible solutions like adding {flex:1} or {height} to listView/ScrollView. But nothing is working. Please help.
Edited: I am adding entire code for better understanding. One more thing to know that my datasource has more than 200 entries.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput,Keyboard,TouchableWithoutFeedback, ActivityIndicator, Switch, ListView, Text, View,
Alert, Platform, TouchableHighlight, Image, TouchableOpacity, ScrollView} from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import { StackNavigator } from 'react-navigation';
//import { add_campaign } from './add_campaign';
class view_camp extends Component {
static navigationOptions = {
title: 'View Campaigns',
headerLeft : null,
};
listViewRef;
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: '',
stat: '',
isPopupMenu : false,
menu_camp_id : '',
menu_status : '',
menu_camp_name : '',
enableScrollViewScroll : true,
}
this.setEnableScrollViewScroll = this.setEnableScrollViewScroll.bind(this);
this.onStartShouldSetResponderCapture = this.onStartShouldSetResponderCapture.bind(this);
this.arrayholder = [];
}
setEnableScrollViewScroll(value) {
// we need to manually handle the ScrollView scrollEnabled to allow child ListView to scroll in there parent
this.setState({ enableScrollViewScroll: value });
}
onStartShouldSetResponderCapture() {
// when there is scroll in the result list - we set the parent's ScrollView scrollEnabled to false
// so the child ListView can handle the scroll events
this.props.setEnableScrollViewScroll(false);
// if the scroll is out of the ListView we reset the parent's ScrollView scrollEnabled to true
if (this.listViewRef.scrollProperties.offset === 0 && this.state.enableScrollViewScroll === false) {
this.setEnableScrollViewScroll(true);
}
}
componentDidMount() {
const base64 = require('base-64');
return fetch('APIURL', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": "Basic " + base64.encode("demo:QZMW]C")
}
}).then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
}, function () {
this.arrayholder = responseJson;
});
})
.catch((error) => {
console.error(error);
});
}
_onSearchFilterFunction(text) {
const newData = this.arrayholder.filter(function (item) {
const itemData = item.Ad_name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
_onPressButton = () => {
this.props.navigation.navigate('Third', { ClientId: this.props.navigation.state.params.ClientId });
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
RenderListViewHeader = () => {
var header = (
<View style={{ flex: 1, flexDirection: 'row' }} >
<ScrollView horizontal={true}>
<Text style={styles.stickyTextViewContainer} >Ad Name</Text>
<Text style={styles.stickyTextViewContainer} >Ad Type</Text>
<Text style={styles.stickyTextViewContainer} >CPR</Text>
<Text style={styles.stickyTextViewContainer} >CPM</Text>
<Text style={styles.stickyTextViewContainer} >Budget</Text>
<Text style={styles.stickyTextViewContainer} >Daily Budget</Text>
<Text style={styles.stickyTextViewContainer} >Total Budget Spent</Text>
<Text style={styles.stickyTextViewContainer} >Imps</Text>
<Text style={styles.stickyTextViewContainer} >Recalls</Text>
<Text style={styles.stickyTextViewContainer} >Correct Recalls</Text>
<Text style={styles.stickyTextViewContainer} >Clicks</Text>
<Text style={styles.stickyTextViewContainer} >Start Date</Text>
<Text style={styles.stickyTextViewContainer} >End Date</Text>
<Text style={styles.stickyTextViewContainer} >Status</Text>
{/* <Text style={styles.stickyActionTextViewContainer} >Action</Text> */}
</ScrollView>
</View>
);
return header;
};
getMenuParams = (camp_id,status,camp_name) =>
{
//console.log("camp_id: "+camp_id +" status: "+status+" camp_name: "+camp_name);
this.setState({
isPopupMenu : true,
menu_camp_id : camp_id,
menu_status : status,
menu_camp_name : camp_name
});
//console.log("ispopupmenu: "+this.state.isPopupMenu+" menu_camp_id: "+this.state.menu_camp_id +" menu_status: "+this.state.menu_status+" menu_camp_name: "+this.state.menu_camp_name);
}
toggleCancel = () =>
{
this.setState({
isPopupMenu:false,
});
}
setMenuRef = ref => {
this._menu = ref;
this.showMenu();
};
hideMenu = () => {
this._menu.hide();
};
showMenu = () => { //console.log("start");
this._menu.show();
//console.log("end");
};
render() {
const { navigate } = this.props.navigation;
//const screenHeight = Dimensions.get('window').height;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainerViewCamp}
// when scrolling the parent scroll view we reset the enableScroll to true
onStartShouldSetResponderCapture={() =>{this.setEnableScrollViewScroll(true);}}
>
<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4' }}>All Campaigns</Text>
<View style={styles.OuterSectionStyle}>
<View style={styles.SectionStyle}>
<FontAwesomeIcon name='search' style={styles.icon} />
<TextInput
onChangeText={(text) => this._onSearchFilterFunction(text)}
value={this.state.text}
style={{ flex: 1 }}
placeholder="Search Here"
underlineColorAndroid="transparent"
/>
</View>
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity={.5}
onPress={this._onPressButton}>
<MaterialIcon name='add-box' style={styles.icon} />
</TouchableOpacity>
</View>
<ScrollView horizontal={true}
// enable ScrollView scroll according to state's value
scrollEnabled = {this.state.enableScrollViewScroll}
>
<ListView
onRef={(ref) => this.listViewRef = ref}
onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
enableEmptySections={true}
dataSource={this.state.dataSource}
stickyHeaderIndices={[0]}
renderHeader={this.RenderListViewHeader}
renderSeparator={this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{ flex: 1, flexDirection: 'row'}}>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer}> {rowData.Ad_name} </Text>
</TouchableOpacity>
{/* <Text style={styles.textViewContainer} >{rowData.Ad_name}</Text> */}
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Ad_type}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.CPR}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.CPM}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Budget}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Daily_budget}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Total_budget_spent}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Imps}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Recalls}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Correct_recalls}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Clicks}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.Start_date}</Text>
</TouchableOpacity>
<TouchableOpacity
//style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.getMenuParams.bind(this,rowData.campaign_id,rowData.Status,rowData.Ad_name)}
>
<Text style={styles.textViewContainer} >{rowData.End_date}</Text>
</TouchableOpacity>
{rowData.Status == '0' ?
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Inactive </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.Status, rowData.campaign_id)}
value={false} />
</View>
:
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Active </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.Status, rowData.campaign_id)}
value={true} />
</View>}
</View>
}
/>
</ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainerViewCamp: {
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex: 1,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
textViewContainer: {
textAlignVertical: 'center',
padding: 7,
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
},
stickyTextViewContainer: {
textAlignVertical: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
marginBottom: 3,
},
stickyActionTextViewContainer: {
textAlignVertical: 'center',
textAlign: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
justifyContent: 'center',
alignItems: 'center',
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 550,
},
textWithSwitch: {
fontSize: 13,
},
imageClass: {
height: 40,
width: 40,
marginLeft: 25,
borderRadius: 7,
},
SubmitButtonStyle: {
marginTop: 10,
marginLeft: 10,
marginBottom: 5,
backgroundColor: '#D6EAF8',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
TextStyle: {
color: '#fff',
textAlign: 'center',
},
icon: {
fontSize: 30,
padding: 5
},
TextInputStyleClass: {
textAlign: 'center',
height: 40,
borderWidth: 1,
borderColor: '#009688',
borderRadius: 7,
backgroundColor: "#FFFFFF"
},
OuterSectionStyle: {
flexWrap: 'wrap',
alignItems: 'flex-start',
flexDirection: 'row',
margin: 10,
height: 50,
},
SwitchOuterSectionStyle: {
flexWrap: 'wrap',
padding: 7,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
width: 150,
borderWidth: 1,
borderColor: '#87ceeb',
},
IconOuterSectionStyle: {
flexWrap: 'wrap',
padding: 7,
alignItems: 'flex-start',
flexDirection: 'row',
justifyContent: 'center',
width: 550,
borderWidth: 1,
borderColor: '#87ceeb',
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: .5,
borderColor: '#000',
height: 40,
width: 220,
borderRadius: 5,
margin: 10
},
});
module.exports = view_camp;
The ListView is not scrolling probably according to this React Native issue.
The following works very well on IOS and Android both, scrolls the ListView if the touch is on List and else it scrolls the ScrollView.
Try change your code as following:
class MainContainerViewCamp extends React.Component {
listViewRef; // hold list view reference
constructor() {
this.state={ enableScrollViewScroll: true};
this.setEnableScrollViewScroll = this.setEnableScrollViewScroll.bind(this);
this.onStartShouldSetResponderCapture = this.onStartShouldSetResponderCapture.bind(this);
}
setEnableScrollViewScroll(value) {
// we need to manually handle the ScrollView scrollEnabled to allow child ListView to scroll in there parent
this.setState({ enableScrollViewScroll: value });
}
onStartShouldSetResponderCapture() {
// when there is scroll in the result list - we set the parent's ScrollView scrollEnabled to false
// so the child ListView can handle the scroll events
this.props.setEnableScrollViewScroll(false);
// if the scroll is out of the ListView we reset the parent's ScrollView scrollEnabled to true
if (this.listViewRef.scrollProperties.offset === 0 && this.state.enableScrollViewScroll === false) {
this.setEnableScrollViewScroll(true);
}
}
render() {
...
<View style = {{ flex:1 }}
// when scrolling the parent scroll view we reset the enableScroll to true
onStartShouldSetResponderCapture={() =>{this.setEnableScrollViewScroll(true);}>
<ScrollView
horizontal={true}
// enable ScrollView scroll according to state's value
scrollEnabled={this.state.enableScrollViewScroll}
>
<ListView
...
onRef={(ref) => this.listViewRef = ref}
onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
renderRow {(rowData) =>
<View style={{ flex: 1, flexDirection: 'row' }}>
</View>
}
/>
</ScrollView>
</View>
...
}
}
I am currently working with React Native and the new React Navigation. but there is an error: Currently having an error in one screen.
Navigation is as follows
MainScreen->Login takes to Splash Screen
Splash -> click on a button takes to Home Screen
HomeScreen->Logout Should take to Main Screen
MainScreen to Home is working fine But Home Screen to Main is not working.
Below is the error coming
' Main' should declare a screen
//Code for the Main screen
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import Splash from './Splash';
import Signin from './signin';
import Forget from './forget';
import { StackNavigator } from 'react-navigation';
class Main extends Component {
constructor(props) {
super(props)
this.state = {
txt_input_email: '',
txt_input_password: '',
};
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
//==========================function to validate user information=========================================//
mvalidate(){
const { navigate } = this.props.navigation;
if (this.state.txt_input_email==""){
Alert.alert("Please enter email");
return;
}
if(this.state.txt_input_password==""){
Alert.alert("Please enter Password");
return;
}
if(!this.validateEmail(this.state.txt_input_email ||
!this.vlidatePassword(this.state.txt_input_password))){
Alert.alert("Email/Password is invalid/Wrong");
}else{
if(this.state.txt_input_email=="abc#gmail.com" && this.state.txt_input_password=="abc123"){
navigate('SplashPage')
}else{
Alert.alert('Wrong username/password');
}
}
}
validateEmail(email) {
if(/^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/){
return true;
}else{
return false;
}
}
vlidatePassword(password){
if(/^[a-zA-Z0-9]{4,100}$/){
return true;
}else{
false;
}
}
//=========================================================================================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('../images/logo.jpg')} style={styles.image}></Image>
<Text style={styles.text}> Sign In</Text>
<View style={styles.set}>
<View style={styles.imageset}>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
<View style={[styles.inputWrap, styles.set]}>
<TextInput
placeholder="Email/Employee Id"
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_email: value.trim()})}
/>
</View>
<View style={styles.inputWrap}>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_password: value.trim()})}
/>
</View>
<View style={styles.imageset}>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('ForgetPage')}>
<View>
<Text style={styles.forget}>Forget Password ?</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} onPress={()=>this.mvalidate()} >
<View style={styles.button}>
<Text style={styles.buttonText}> SIGN IN</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.imageset}>
<Text style={styles.user}>New User ? </Text>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('SigninPage')} >
<View>
<Text style={styles.signup}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
inputWrap: {
flexDirection: "row",
marginVertical: 10,
height: 40,
width: 300,
marginHorizontal: 20,
backgroundColor: "#FF0000"
},
text: {
color: "#FFF",
fontSize: 25
},
input: {
flex: 1,
paddingHorizontal: 15,
backgroundColor: '#fff'
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginLeft: 45,
width: 100,
height: 35,
alignItems: "center",
justifyContent: "center"
},
buttonText: {
color: '#FFF',
fontSize: 15
},
forget: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginHorizontal: 15,
marginTop: 20,
},
signup: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginLeft: 25,
marginTop: 15
},
image: {
width: 250,
height: 110
},
set: {
marginTop: 20
},
imageset: {
flexDirection: "row"
},
facebook: {
marginLeft: 85,
width: 65,
height: 65
},
google: {
marginLeft: 20,
width: 65,
height: 65
},
user: {
fontSize: 18,
color: "#FFF",
marginLeft: 25,
marginTop: 17
}
});
const FirstProject = StackNavigator({
MainPage: { screen: Main },
SplashPage: { screen: Splash },
SigninPage: { screen: Signin },
ForgetPage: { screen: Forget },
});
export default FirstProject;
//Code or the Splash Screen
import React, { Component } from 'react';
import { AppRegistry, View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './Home';
class Splash extends Component {
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.contain}>
<Image source={require('../images/splash.jpg')} style={{
height: 435, width: 300,
marginHorizontal: 30, marginTop: 52
}}>
<TouchableHighlight onPress={() => navigate('HomePage')} >
<Image source={require('../images/cancel.png')} style={styles.container}>
</Image></TouchableHighlight>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
</Image>
<View style={styles.dir}>
<TouchableHighlight >
<Image source={require('../images/heart.png')} style={styles.welcome}></Image>
</TouchableHighlight>
<Image source={require('../images/whatsapp.png')} style={styles.whatsap}></Image>
<Image source={require('../images/sharing-big-symbol.png')} style={styles.instructions}></Image>
</View>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 30,
marginHorizontal: 270
},
contain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
welcome: {
height: 35,
width: 35,
marginHorizontal: 40,
marginVertical: 5
},
instructions: {
height: 45,
width: 45,
marginHorizontal: 14,
marginVertical: 5
},
whatsap: {
height: 35,
width: 35,
marginLeft: 135,
marginVertical: 9
},
facebook: {
height: 35,
width: 35,
marginLeft: 247,
marginVertical: 368
},
google: {
height: 35,
width: 35,
marginLeft: 235
},
dir: {
flexDirection: 'row'
}
});
const SplashPage = StackNavigator({
SplashPage: { screen: Splash },
HomePage: { screen: Home}
});
export default SplashPage;
// Code for the Home Page
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, Image,
TouchableHighlight,
DrawerLayoutAndroid,
TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Main from './Main';
import About from './meditationpages/about';
class Home extends Component {
openDrawer() {
this.refs['DRAWER'].openDrawer()
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
navigationView = (
<View style={{ flex: 1, backgroundColor: '#B0E0E6', }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Home</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Meditation</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Art & Wellness</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>One - on - One counselling</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Health Moments</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Blogs</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Live Sessions</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Forums</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Masters</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Global Events & Retreats</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Interview/Audio/Video</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Online Learning</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>e-store</Text>
</View>
);
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<DrawerLayoutAndroid
drawerWidth={250}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.welcome}>
<TouchableHighlight onPress={() => this.openDrawer()}>
<Image source={require('../images/menu.png')} style={styles.imagess}></Image>
</TouchableHighlight>
<Image source={require('../images/home.png')} style={[styles.imagess, styles.menu_diff]}></Image>
<TouchableHighlight onPress={() => navigate('AboutPage')} >
<Image source={require('../images/meditation.png')} style={[styles.imagess, styles.icon_diff]}></Image></TouchableHighlight>
<Image source={require('../images/art.png')} style={[styles.imagess, styles.icon_diff]}></Image>
</View>
<TouchableHighlight onPress={() => navigate('MainPage')} style={styles.set}>
<View style={styles.button}>
<Text style={styles.buttonText} > Logout</Text>
</View>
</TouchableHighlight>
</DrawerLayoutAndroid>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4682B4',
},
welcome: {
flexDirection: 'row',
marginTop: 10,
backgroundColor: '#4682B4'
},
imagess: {
marginLeft: 10,
height: 35,
width: 35
},
menu_diff: {
marginLeft: 177
},
icon_diff: {
marginLeft: 15
},
buttonText: {
color: '#FFF',
fontSize: 20
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginHorizontal: 120,
width: 100,
height: 40,
alignItems: "center",
justifyContent: "center"
},
set: {
marginTop: 250,
justifyContent: 'center',
alignItems: 'center',
},
});
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
MainPage:{ screen: Main},
});
export default HomePages
I have solved this issue. I commented one line
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
// MainPage:{ screen: Main}, //Commenting this line solved the issue
});
Maybe main page reference was already created that's why it was creating the problem.
I'm trying to a implement a logic to display some data fetched from a simple REST API. So i'm grabbing the JSON object in the RanjoorExplore class and the data is sent into the data to the ExploreCard in the other class. So the this.props.data must be referencing the passed variable. By mapping that variable, I'm displaying the title attribute of the response object in a simple Text Component.
I'm facing this error:
undefined is not a function(evaluating this.props.data.map).
RanjoorExplore:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
Alert
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ExploreCard from '../../elements/cards/ExploreCard';
import ExploreHeader from '../../elements/headers/ExploreHeader';
class RanjoorExplore extends Component {
constructor(){
super();
this.state = {
rawData: []
}
}
static navigationOptions = {
header: null,
title: 'Explore',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name="bandcamp"
size={24}
color={focused ? '#4ab367' : 'white'}
/>
),
headerStyle: { backgroundColor: '#202026' },
headerTitleStyle: {
color: 'white'
}
};
fetchGanjoorData() {
return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((responseJson) => {
this.setState({rawData: responseJson})
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
this.fetchGanjoorData();
}
render() {
return (
<View style={styles.ExploreContainer}>
<ExploreHeader />
<ScrollView>
<ExploreCard data={this.state.rawData} />
</ScrollView>
</View>
);
}
}
var styles = StyleSheet.create({
ExploreContainer: {
backgroundColor: '#303036',
height: '100%',
width: '100%'
},
})
export default RanjoorExplore
ExploreCard:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Alert
} from 'react-native';
import { Card, ListItem, Button, Icon, Avatar } from 'react-native-elements';
export default class ExploreCard extends Component {
render() {
/* Mapped data will be processed right here */
let mappedData = this.props.data.map(function (data1) {
return (
<View>
{data1.title}
</View>
)
})
return (
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}></View>
<Card
containerStyle={{
width: '85%', height: 250, backgroundColor: '#202026', shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black', borderWidth: 0, borderRadius: 8, flexDirection: 'row'
}}
wrapperStyle={{ alignSelf: 'flex-end' }} >
<View style={{ flex: 2, alignSelf: 'flex-end' }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
<Text style={{ fontFamily: 'IRANSans', marginRight: 5, marginTop: 12, color: '#505056' }}>حافظ</Text>
<Avatar
medium
rounded
source={require('../../img/avatars/ferdowsi.jpg')}
containerStyle={{
alignSelf: 'flex-end', marginRight: 15,
shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black'
}}
/>
</View>
<View>
<Text style={{ alignSelf: 'flex-end', fontFamily: 'IRANSans', color: 'white', marginTop: '10%', marginRight: '5%' }}>
{mappedData}
</Text>
<Text style={{ alignSelf: 'flex-start', fontFamily: 'IRANSans', color: 'white' }}>
تا دمی برآساییم زین حجاب ظلمانی
</Text>
</View>
</View>
<View style={{ alignSelf: 'flex-end', backgroundColor: 'transparent', flexDirection: 'row' }}>
<Icon
name='favorite' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<Icon
name='grade' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<View>
<Button
textStyle={{ fontSize: 15 }}
iconRight
backgroundColor='#4ab367'
fontFamily='IRANSans_UltraLight'
buttonStyle={{
height: 15, width: 110,
borderRadius: 8
}}
title='ادامه مطلب'
/>
</View>
</View>
</Card>
<View style={{ flex: 1 }}></View>
</View>
);
}
}
Can someone please help me solve this issue?
Thanks in advance.
https://jsonplaceholder.typicode.com/posts/1 returns an object, not an array. Therefore, map is not a valid operation
Perhaps you meant to use https://jsonplaceholder.typicode.com/posts/? That returns an array