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>
);
}
}
Related
I have a FlatList nested in a SectionList as shown below.
There is always 3 sections (rows) and each section has a FlatList with a horizontal scroll.
Expected
On button click, invoking the scrollToEnd() function, to scroll all 3 flatlists from each section to end.
Problem
Only the bottom or last flatlist scrolls to the end.
I cannot figure out why this is - I thought the ref in the flatlist may only be referencing the last Flatlist rendered and not the other two, maybe? If so, any tips or suggestions are welcome. Thank you.
...
const flatlistRef = useRef();
const scrollToEnd = () => {
flatlistRef.current.scrollToEnd({ animating: true });
};
...
<SectionList
contentContainerStyle={styles.sectionListContainer}
stickySectionHeadersEnabled={false}
sections={myData}
renderSectionHeader={({ section }) => (
<>
<FlatList
horizontal
data={section.data}
contentContainerStyle={
styles.flatlistContainer
}
renderItem={({ item }) => (
<Button
onPress={() => updateData(item.id)}
>
<ListItem item={item} />
</Button>
)}
showsHorizontalScrollIndicator={false}
ref={flatlistRef}
/>
</>
)}
renderItem={({}) => {
return null;
}}
/>
I have also working on this but I found a solution where I can create a Section.List by using react-native-paper.
But you can also use the map function, Here is the code of that
import React from "react";
import {View,Text} from "react-native";
const App = () =>{
return(
<View style={{flex: 1}}>
{data.map((item, index) => (
<View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
<Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
<Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
<Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
</View>
))}
</>}
</View>
))}
</>}
</View>
))}
</View>
)
}
export default App;
I hope It will help.
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.
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.
I am trying to customize TouchableOpacity with below style
<TouchableOpacity
onPress={() => {
navigate("EnableNotification");
}}
>
<View
style={{
backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240,
marginTop: 30,
height: 40
}}
>
<Text style={{ color: "white" }}>CONTINUE</Text>
</View>
</TouchableOpacity>
I have this TouchableOpacity in each component. I want something like customize this view in one js file & reuse this. Wherever I want to use this simply implement onPress and Text. How can I achieve this ?
Here's a snippet of one of the buttons I have created. The textStyle & buttonStyle are both in this component excluded, but if you wanted them to be variable you would pass it through RoundButton = ({ textStyle, buttonStyle })
const RoundButton = ({ onPress, children }) => {
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>{children}</Text>
</TouchableOpacity>
);
};
And here's a use case:
<RoundButton onPress={this.onSubmit.bind(this)>Confirm</RoundButton>
So, you could go:
const Button = ({ onPress, buttonText }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={styles.button}>
<Text style={{ color: '#fff' }}>{buttonText}</Text>
</TouchableOpacity>
);
};
const styles = {
backgroundColor: '#FE434C',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
width: 240,
marginTop: 30,
height: 40,
}
then import { Button } from '../somepath/Button.js;
Where it will be a useable custom JSX element.
return (
...
<Button onPress={() => navigate('EnableNotification'}>CONTINUE</Button>
...
)
EDIT: Update for passing styling:
const Button = ({ onPress, buttonText, buttonStyle, textStyle }) => {
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>{buttonText}</Text>
</TouchableOpacity>
);
};
Your use case would be:
import { Button } from '../somepath/Button.js';
class MyPage extends Component {
render() {
return (
...
<Button buttonStyle={styles.yourStyle} textStyle={styles.yourStyle2} onPress={() => navigate('EnableNotification')>CONTINUE</Button>
...
)
}
}
const styles = {
yourStyle: {
...
}
yourStyle2: {
...
}
}
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