How to add icons in drawer menu for individual menu item? - android

I am using drawer menu and I need to add icons to each of the menu items. How to add icons so that they get displayed before the name of eah activity?
My code -
class SideMenu extends Component {
renderMenu() {
let menuArray = [
{
id:1,
screen: 'HomeDrawer',
title: 'Dashboard',
},
{
id:2,
screen: 'AccountSettings',
title: 'Account Settings',
},
{
id:3,
screen: 'NotificationSettings',
title: 'Notification Settings',
}
]
return menuArray.map((item) => {
return(
<TouchableWithoutFeedback
onPress={this.navigateToScreen(item.screen)} key={item.id}>
<View style={styles.menuItemContainer}>
<View style={{ flex:2 }}>
<Text style={styles.menuText}>{item.title}</Text>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
render() {
return(
<View style={{ flex:1, backgroundColor:'#FFFFFF' }}>
<ScrollView>
<View style={{ height: '30%', marginBottom: 50}}>
<LinearGradient
start={{ x: 0, y:0 }}
end={{ x: 1, y: 0 }}
colors={['#1865e5', '#159af6']}
style={{height: 200}} >
<View style={{ elevation: 5,}}>
<Image
source={require('../assets/logo.png')}
style={{ height:100, width:100, marginLeft: 10, marginTop: 30, marginBottom: 10 }}
/>
</View>
<View>
{
this.state.userDetails ?
<View>
<Text style={{ fontWeight: "bold", fontSize:15, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].name}</Text>
<Text style={{ fontSize:14, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].email}</Text>
</View>
:
<Text>Loading...</Text>
}
</View>
</LinearGradient>
</View>
{ this.renderMenu() }
<TouchableWithoutFeedback
onPress={ () => {
Alert.alert(
'Logout',
'Are you sure you want to logout?',
[
{text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'Yes', onPress: () => {
AsyncStorage.removeItem('userDetails', () =>
{
});
this.navigateToScreen('Login')();
}},
],
{ cancelable: false }
)
}}>
<View style={styles.menuItemContainer}>
<View style={{ flex:3 }}>
<Text style={styles.menuText}>Logout</Text>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</View>
)
}
}
})
export default SideMenu
To achieve -
Tried adding icon attribute to each ids and with image but unfortunately it didn't work as expected.
How to add the icons that are in the assets folder so that it can be displayed as per the design that it attached along with this question?


You have to make a customized side bar to add more flexibility to add icons.

Related

Swipable is not working in Android (Expo Cli)

import {Swipeable} from 'react-native-gesture-handler' not working in android (expo Cli). I've tried everything, ejected expo cli, edited MainActivity.java file but nothing works. There are a couple of threads but none of them works. Please help as I'm stuck with this issue for a long time. Thanks
Here is my code.
import React from 'react';
import { View, Text, StyleSheet, Keyboard,SafeAreaView, TouchableOpacity, FlatList, KeyboardAvoidingView, TextInput, Animated } from 'react-native';
import { AntDesign, Ionicons } from "#expo/vector-icons";
import { SwipeListView } from 'react-native-swipe-list-view';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { Colors } from 'react-native/Libraries/NewAppScreen';
export default class TodoModal extends React.Component {
state = {
newTodo: ""
};
toggleTodoCompleted = index => {
let list = this.props.list;
list.todos[index].completed = !list.todos[index].completed;
this.props.updateList(list);
};
addTodo = () => {
let list = this.props.list;
list.todos.push({ title: this.state.newTodo, completed: false });
this.props.updateList(list);
this.setState({ newTodo: ""});
Keyboard.dismiss();
};
renderTodo = (todo, index) => {
return (
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
);
};
rightActions = (dragX, index) => {
return (
<TouchableOpacity>
<Animated.View style={styles.deleteButton}>
<Animated.Text>Delete</Animated.Text>
</Animated.View>
</TouchableOpacity>
);
};
render() {
const list = this.props.list;
const taskCount = list.todos.length;
const completedCount = list.todos.filter(todo => todo.completed).length;
return (
<KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null}>
<SafeAreaView style={styles.container}>
<TouchableOpacity
style={{ position: "absolute", top: 64, right: 32, zIndex: 10}}
onPress={this.props.closeModal}
>
<AntDesign name="close" size={24} color="#2D3436" />
</TouchableOpacity>
<View style={[styles.section, styles.header, { borderBottomColor: list.color }]}>
<View>
<Text style={styles.title}>{list.name}</Text>
<Text style={styles.taskCount}>
{completedCount} of {taskCount} tasks
</Text>
</View>
</View>
<View style={[styles.section, { flex: 2 }]}>
<FlatList
data={list.todos}
renderItem={({ item, index }) => this.renderTodo(item, index)}
keyExtractor={(_, index) => index.toString()}
contentContainerStyle={{ paddingHorizontal: 32, paddingVertical: 64 }}
showsVerticalScrollIndicator={false}
/>
</View>
<View style={[styles.section, styles.footer]} >
<TextInput
style={[styles.input, {borderColor: list.color}]}
onChangeText={text => this.setState({ newTodo: text })}
value={this.state.newTodo}
/>
<TouchableOpacity style={[styles.addTodo, {backgroundColor: list.color}]} onPress={() => this.addTodo()}>
<AntDesign name="plus" size={16} color="#FFFFFF" />
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
section: {
flex: 1,
alignSelf: "stretch"
},
header: {
justifyContent: 'flex-end',
marginLeft: 64,
borderBottomWidth: 3
},
title: {
fontSize: 30,
fontWeight: "800",
color: "#2D3436"
},
taskCount: {
marginTop: 4,
marginBottom: 16,
color: "#A4A4A4",
fontWeight: "600"
},
footer: {
paddingHorizontal: 32,
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 1,
height: 48,
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 6,
marginRight: 8,
paddingHorizontal: 8
},
addTodo: {
borderRadius: 4,
padding: 16,
alignItems: "center",
justifyContent: "center"
},
todoContainer: {
paddingVertical: 16,
flexDirection: "row",
alignItems: "center"
},
todo: {
color: "#2D3436",
fontWeight: "700",
fontSize: 16
},
deleteButton: {
flex: 1,
backgroundColor: Colors.red,
justifyContent: "center",
alignItems: "center",
width: 80
}
});

You have to wrap the swipeable in a gestureHandlerRootView
import { GestureHandlerRootView, Swipeable } from "react-native-gesture-handler";
<GestureHandlerRootView>
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
</Swipeable>

DrawerLayoutAndroid don't show menu with openDrawer method

I would like use DrawerLayoutAndroid module on React-Native app. For use openDrawer programmaticaly, i use useRef hook.
On run this method, my Drawer show only black "overflow", but not the navigation.
If i swip to the right, my Drawler menu will be show :/
My code :
const Layout = ({ children }) => {
let drawler = useRef(null);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={drawler}
renderNavigationView={() => (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>
I'm in the Drawer!
</Text>
</View>
)}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={styles.container}>
<Button onPress={() => drawler.current.openDrawer()}> // Show only overflow, not the menu
Open drawler
</Button>
{children}
</View>
</ScrollView>
</View>
</DrawerLayoutAndroid>
);
};
Anyone can help me ?

I solved the issue with useCallback
const [drawer, setDrawer] = useState();
const refDrawer = useCallback(element => {
setDrawer(element);
}, []);
Don't forget set ref={refDrawer} attribute to the DrawerLayoutAndroid component.

FlatList Android Items Overlepping

I have a FlatList in my ReactNative app, but I noticed (when alternating background colors) that the items are overlapping one another in a small space.
An Example of how overlapping it is: https://imgur.com/a/wLQnGOG
My Styles, basically changing colors (in the rows).
const styles = StyleSheet.create({
tableRow: {
padding: 5,
flexDirection: "row",
justifyContent: "space-between",
},
tableBuy: {
backgroundColor: colors.buyBackground
},
tableSell: {
backgroundColor: colors.sellBackground
},
})
export default styles;
My Component TSX
export default class CoinPageHistoryComponent extends React.Component<CoinPageHistoryProps> {
constructor(props: CoinPageHistoryProps) {
super(props);
this.state = {};
}
renderHistoryBlock = ({ item }) =>
<View style={[styles.tableRow, item.type === "SELL" ? styles.tableSell : styles.tableBuy]} >
<Text style={styles.tableRowItem1} >{item.type === "SELL" ? "+" : "-"} {item.quantity.toFixed(8)}</Text>
<Text style={styles.tableRowItem2} >{item.rate.toFixed(8)}</Text>
<Text style={styles.tableRowItem3} >{item.total.toFixed(8)}</Text>
</View>
public render() {
return (
<View style={styles.container}>
<View style={styles.tableRow}>
<Text style={styles.tableRowItemHeader} >Quantity</Text>
<Text style={styles.tableRowItemHeader} >Rate</Text>
<Text style={styles.tableRowItemHeader} >Total</Text>
</View>
<FlatList
style={styles.table}
data={this.props.coin.history}
keyExtractor={(_, index) => index.toString()}
onRefresh={() => this.props.onRefresh()}
refreshing={this.props.refreshing}
renderItem={this.renderHistoryBlock}
/>
</View>
);
}
}

React-Native: Listview not scrolling to bottom of screen in IOS only

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>
...
}
}

How to start another component in react native

I am learning react-native programming where I have one component in index.android.js. I have a TouchableOpacity in that component. I want to start next component on click on TouchableOpacity.
<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={}>
<Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text>
</TouchableOpacity>
Can anyone suggest that How can I set click listener in onPress and how to start next component on clicking on this.
Thanks in advance.

Try like this
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} = React;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
<Text style={styles.welcome}>Greetings!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go to page two</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
<Text style={styles.welcome}>This is page two!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go back</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'white',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
refer this link

The entire point of touchable opacity is to touch it.
Put your Business Logic in a seperate class and call it from the Touchable opacity event. Then use that logic in your code where ever you want!

You can do conditional rendering in a single component depending on state/props, so maybe something like this:
render() {
return state.displayComponent?
<NewComponent /> :
<TouchableOpacity ... onPress={() => this.setState({displayComponent: true})} />
}
, but if you're looking for something more robust, read up on react-native-router-flux

Categories

Resources