I am building a chat app and trying to count how many times the user pressed on 'space' key every time they press it and not counting it on the final outcome of their textinput entery.
<TextInput onKeyPress={(e) => {
let pressedKey = e.nativeEvent.key;
if(pressedKey === ' '){
pressedKey = 'Space';
} />
This code example works for me only if the user press two times on space
Here is the code that do the count for you:
import React, {useState} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
const App = () => {
const [spaceCount, setSpaceCount] = useState(0);
const onInputKeyPressHandler = e => {
e.nativeEvent.key === ' ' &&
setSpaceCount(oldSpaceCount => oldSpaceCount + 1);
};
return (
<View style={styles.container}>
<Text>Hello friend :)</Text>
<TextInput style={styles.input} onKeyPress={onInputKeyPressHandler} />
<Text>{`Space Count: ${spaceCount}`}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 100,
paddingHorizontal: 30,
},
input: {
height: 50,
borderWidth: 1,
marginVertical: 10,
paddingHorizontal: 20,
},
});
export default App;
try using a counter useState. when the user presses on space, the counter increments by 1
const [spaceCounter, setSpaceCounter] = useState(0)
<TextInput onKeyPress={(e) => {let pressedKey = e.nativeEvent.key;
if(pressedKey === ' ')
{
pressedKey = 'Space';
setSpaceCounter = spaceCounter +1;`
}/>
Related
I am trying to code something that maps through text and individually styles each word based on state. And when the user taps a word, I would like to rerender all instances of that word on the page with different styling. However, the way I currently have it working rerenders ALL of the text, which is causing a ton of lag in the app.
Is there a way I can restyle mapped components based on some parameter passed to each component, or maybe creating a memo for each word?
Here is an example:
import React, {useState} from 'react';
import { Text, View, StyleSheet} from 'react-native';
export default function RenderedText() {
const [yellowHighlightedWords, setYellowHighlightedWords] = useState(["west", "where", "neighborhood", "trouble", "cool"])
const [redHighlightedWords, setRedHighlightedWords] = useState(["playground", "school", "most"])
const str = "In West Philadelphia born and raised, On the playground is where I spent most of my days Chillin' out, maxin', relaxin' all cool And all shootin' some b-ball outside of the school When a couple of guys who were up to no good Started makin' trouble in my neighborhood I got in one little fight and my mom got scared"
let arr = str.split(/\s/g)
const handlePress = (el) => {
let word = el.toLowerCase()
if (yellowHighlightedWords.includes(word) === true) {
setYellowHighlightedWords((prevState) => {
return prevState.filter(element => {
return element !== word
})
})
} else if (redHighlightedWords.includes(word) === true) {
setRedHighlightedWords((prevState) => {
return prevState.filter(element => {
return element !== word
})
})
} else {
setYellowHighlightedWords((prevState) => {
return (
[word, ...prevState]
)
})
}
}
return (
<Text style={styles.paragraph}>
{arr.map((el) => {
let lc = el.toLowerCase()
return (
<Text style={redHighlightedWords.includes(lc) ? styles.redHighlighted
: yellowHighlightedWords.includes(lc) ? styles.yellowHighlighted : styles.paragraph}
onPress={() => handlePress(el)}
>
{el + " "}
</Text>
)
})}
</Text>
)
}
const styles = StyleSheet.create({
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
yellowHighlighted: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: "yellow",
},
redHighlighted: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: "red",
}
});
And
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import RenderedText from './components/RenderedText'
export default function App() {
return (
<View style={styles.container}>
<Text>
<RenderedText />
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Use memo to stop the text from re-rendering unnecessarily link:
import React, { memo } from 'react';
import { Text, StyleSheet } from 'react-native';
// function that decides when to rerender component
const areEqual = (prevProps, nextProps) => {
// since text wont change only worry about backgroundColor
return prevProps.backgroundColor == nextProps.backgroundColor;
// RenderedText is wrapped in a Text element so this is here
// && prevProps.children == nextProps.children
};
const MemoText = memo(({ backgroundColor, children, style, ...textProps }) => {
return (
<Text style={[styles.paragraph, { backgroundColor }]} {...textProps}>
{children}
</Text>
);
}, areEqual);
const styles = StyleSheet.create({
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
export default MemoText;
RenderedText
import React, { useState, useMemo, useCallback, memo } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import MemoText from './MemoText';
const yellowWords = ['west', 'where', 'neighborhood', 'trouble', 'cool'];
const redWords = ['playground', 'school', 'most'];
const str =
"In West Philadelphia born and raised, On the playground is where I spent most of my days Chillin' out, maxin', relaxin' all cool And all shootin' some b-ball outside of the school When a couple of guys who were up to no good Started makin' trouble in my neighborhood I got in one little fight and my mom got scared";
const strObj = str.split(/\s/g).map((word) => {
let color = null;
if (yellowWords.find((t) => t.toLowerCase() == word.toLowerCase())) {
color = 'yellow';
} else if (redWords.find((t) => t.toLowerCase() == word.toLowerCase())) {
color = 'red';
}
return {
text: word,
color: color,
};
});
export default function RenderedText() {
const [textStyle, setTextStyle] = useState(strObj);
const handlePress = index=>{
const newText = [...textStyle]
let currentColor = newText[index].color
newText[index].color = currentColor ? null : 'yellow'
setTextStyle(newText)
}
return (
<>
{textStyle.map(({ text, color },index) => {
return (
<MemoText backgroundColor={color} onPress={() => handlePress(index)}>
{text + ' '}
</MemoText>
);
})}
</>
);
}
I want to use onScrollBegin on my flatlist. But everytime I make scroll the function runs. I only want to run this function when I am at the top, not everytime I scroll.
import * as React from 'react';
import { StyleSheet, Text, View, Pressable, Image, Dimensions, Platform, FlatList, TextInput } from 'react-native';
import { messages } from '../utils/mockChat';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import Modal from 'react-native-modalbox';
import { openModalImage } from '../redux/slice/chat/chatSlice';
const { width, height } = Dimensions.get('screen');
function propsEqual(prevProp, nextProp) {
if(prevProp.id === nextProp.id) {
return true;
}
}
const Item = React.memo(({ global_user_id, id, type, render, allDates, name, user_id, reciever, text, images, video, sending, pending, read, date }) => {
const dateNum = moment(date).format('DD-MM-YYYY');
return (
<View style={s.item}>
<View style={s.itemContainer}>
<View style={global_user_id === user_id ? s.ownerText : s.reciever_text}>
<Text style={s.text}>{ text }</Text>
</View>
</View>
</View>
)
}, propsEqual);
const userState = state => state.user.userID;
const modalState = state => state.chatSlice.modalImage;
const Chat = ({ route, navigation }) => {
const { image } = route.params;
const dispatch = useDispatch();
const modalSec = useSelector(modalState);
const userID = useSelector(userState);
const [message, setMessage] = React.useState(generateItems(messages));
const modalR = React.useRef(null);
const timerCloseModal = React.useRef(null);
React.useEffect(() => {
modalSec && modalR.current.open();
}, [modalSec]);
const dates = new Set();
function renderDate(date) {
dates.add(moment(date).format('DD-MM-YYYY'));
return (
<Text style={{color: '#333', fontSize: 12}}>{moment(date).format('DD-MM-YYYY')}</Text>
)
}
const showFooter = () => {
return (
<View style={s.footerContainer}>
<TextInput style={{height: 50, width: '100%', padding: 20}} />
</View>
)
};
const rowRenderer = ({ item }) => {
return (
<Item
item={item}
id={item.id}
allDates={dates}
render={(date) => renderDate(date)}
global_user_id={userID}
name={item.name}
user_id={item.user_id}
reciever={item.reciever}
text={item.text}
images={item.images}
video={item.video}
sending={item.sending}
pending={item.pending}
read={item.read}
type={item.type}
date={item.date} />
)
};
const closeModalImage = React.useCallback(() => {
dispatch(openModalImage());
}, [dispatch, modalR]);
return (
<View style={s.container}>
<FlatList
data={message}
keyExtractor={i => i.id.toString()}
renderItem={rowRenderer}
initialNumToRender={10}
onScrollBeginDrag={() => {
console.log('s');
// setMessage(items);
}}
extraData={message}
ListHeaderComponent={showFooter}
inverted
/>
</View>
)
};
const s = StyleSheet.create({
container: {
flex: 1
},
modal: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 300,
borderRadius: 200,
backgroundColor: 'transparent',
maxHeight: 500,
},
item: {
backgroundColor: 'red',
height: 250,
width: width * 0.8,
marginVertical: 12
},
ownerText: {
alignSelf: 'flex-end',
backgroundColor: 'blue'
},
reciever_text: {
alignSelf: 'flex-start'
}
});
export default Chat;
How can I fix it, that I can only scroll if I am on the top? I use inverted so its hard for me, to know where is the top position. I am very thankful for your help
Make use of the onEndReached prop.
The onEndReached function calls every time you reach the end of a list.
official doc
I am a developing a React Native app.My requirement is to display data from API in the table format.I am using react-native-table-component.I am not able to traverse through an array to display data in the table.Below is my code:
TargetSetUpPage.js:
import React, { useEffect } from "react";
import { StyleSheet, Text, Button, TextInput, ScrollView ,View}
from "react-native";
import { useDispatch,useSelector } from "react-redux";
import * as authActions from "../../store/actions/auth";
import AsyncStorage from '#react-native-
community/asyncstorage';
import { Table, Row, Rows } from 'react-native-table-
component';
const TargetSetUpPage = (props) => {
const [targetid, setTargetId] = React.useState("");
const dispatch = useDispatch();
const devices = [useSelector(state =>
state.auth.availableDevice)];
//console.log('The devices are: '+JSON.stringify(devices));
if (typeof(devices) !== 'undefined' && devices != null) {
console.log('Not Undefined and Not Null')
} else {
console.log('Undefined or Null')
const devices = [useSelector(state =>
state.auth.availableDevice)];
}
const tableHead = ['Target Id','Target Name']
const tableRow = devices;
console.log(devices);
const tableRows = (devices || []).map(item => ({ name:
item.name
}));
useEffect(() => {
const onScreenLoad = async() => {
const useridfordevices = await
AsyncStorage.getItem("userDatauserid");
const obj = JSON.parse(useridfordevices);
const { userid } = obj;
var userid1 = userid[0];
await dispatch(authActions.getDeviceInfo(userid1))
};
onScreenLoad();
},[dispatch]);
return (
<ScrollView showsVerticalScrollIndicator={true}>
<View>
{/* <Table borderStyle={{borderWidth: 2, borderColor:
'#c8e1ff'}}>
<Row data={tableHead} style={styles.head} textStyle=
{styles.text}/>
<Rows data={tableRows} textStyle={styles.text}/>
</Table> */}
<FlatList
data={devices}
keyExtractor={item => item.TargetId}
renderItem={itemData => (
<View style={styles.card}>
{/* <Text style={styles.text}>{itemData.item.TargetName}
</Text> */}
<Button title={itemData.item.TargetName} onPress={()=>{}}/>
</View>
)}
numColumns={2}
/>
<Text style={styles.headingTitle}>
Set your target and start running:
</Text>
<Text style={styles.textstyle}>Target ID</Text>
<TextInput
style={styles.input}
value={targetid}
onChangeText={(targetid) => setTargetId(targetid)}
></TextInput>
<Button
title="Add"
// onPress = {() => }
/>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
width: "80%",
margin: 12,
borderWidth: 1,
padding: 10,
},
headingTitle: {
fontSize: 30,
},
textstyle: {
paddingTop: 10,
fontSize: 20,
},
compact: {
flexDirection: "row",
},});
export default TargetSetUpPage;
After executing it is showing the below tableRow array in console:
Not Undefined and Not Null
Array [
undefined,
]
TypeError: undefined is not an object (evaluating 'item.name')
But If I remove Table and display FlatList,I am able to display the list without any problem .I dont know what mistake I am doing in displaying the Table.Thanks in Advance.
// devices will be the same as auth.availableDevice in your redux
// If auth.availableDevice is undefined at any point, like during boot
// then devices will be undefined too
const devices = useSelector(state => state.auth.availableDevice);
// Let's write our map code so that it handles the case where devices is undefined
const tableRows = (devices || []).map(item => ({ name: item.name }));
I used DataTable from react-native-paper to get the table.Below is the code that renders data from API.
TargetSetUpPage.js:
import React, {useEffect} from "react";
import {StyleSheet, Text, Button, TextInput, ScrollView, View, FlatList}
from "react-native";
import {useDispatch, useSelector} from "react-redux";
import * as authActions from "../../store/actions/auth";
import AsyncStorage from '#react-native-community/async-storage';
import {DataTable} from 'react-native-paper';
const TargetSetUpPage = (props) => {
const [targetid, setTargetId] = React.useState("");
const dispatch = useDispatch();
const devices = useSelector(state => state.auth.availableDevice);
useEffect(() => {
const onScreenLoad = async () => {
const useridfordevices = await
AsyncStorage.getItem("userDatauserid");
const obj = JSON.parse(useridfordevices);
const {userid} = obj;
var userid1 = userid[0];
await dispatch(authActions.getDeviceInfo(userid1))
};
onScreenLoad();
}, [dispatch]);
return (
<ScrollView showsVerticalScrollIndicator={true}>
<View>
<DataTable>
<DataTable.Header>
<DataTable.Title>
<Text>Target Id</Text>
</DataTable.Title>
<DataTable.Title>
<Text>Target Name</Text>
</DataTable.Title>
</DataTable.Header>
{devices.map((item, key) => (
<DataTable.Row>
<DataTable.Cell>{item.TargetId}</DataTable.Cell>
<DataTable.Cell>{item.TargetName}</DataTable.Cell>
</DataTable.Row>
)
)}
</DataTable>
<Text style={styles.headingTitle}>
Set your target and start running:
</Text>
<Text style={styles.textstyle}>Target ID</Text>
<TextInput
style={styles.input}
value={targetid}
onChangeText={(targetid) => setTargetId(targetid)}
></TextInput>
<Button title="Add"
// onPress = {() => }
/>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
width: "80%",
margin: 12,
borderWidth: 1,
padding: 10,
},
headingTitle: {
fontSize: 30,
},
textstyle: {
paddingTop: 10,
fontSize: 20,
},
compact: {
flexDirection: "row",
},
});
export default TargetSetUpPage;
which displays the table on the screen as shown below.
In my parent I have this code:
So I render inside it my custom inputs by this way:
My doubt is how I can access on any part of this parent the text of each input using the ref. Someone can help me?
The textinput component:
https://gist.github.com/ThallyssonKlein/4e054bc368ebc153fbf9222e304ff887
I couldn't solve the problem, apparently there is no way to get this property in pure React-Native.
So I started using the TextInput component of the react-native-paper package. This way the same code worked, I can get the text now with this excerpt:
console.log(refContainerStep1.current.state.value);
use useRef() instead of createRef();
const textInput = useRef(null);
<TextInput
ref={textInput}
....../>
You can access the ref via refContainerStep1.current.
What you can then do is check the Prototype property to check which methods you can use.
I noticed there's a function called _getText which can be used to obtain a value.
An example of grabbing the value in an onPress:
const onPress = () => {
console.log(refContainerStep1.current.__proto__); // See available methods
console.log(refContainerStep1.current._getText()); // Grab the value
}
Do it that way
const onButtonClick = () => {
console.log('get value from parent')
console.log(ref1.current.props.value)
console.log(ref2.current.props.value)
};
Example in expo
Parent
import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';
import MyTextInput from './components/AssetExample';
import { Card } from 'react-native-paper';
export default function App() {
const ref1 = React.createRef();
const ref2 = React.createRef();
const onButtonClick = () => {
console.log(ref1.current.props.value)
console.log(ref2.current.props.value)
};
return (
<View style={styles.container}>
<Card>
<button onClick={onButtonClick}>get value</button>
<MyTextInput label={'label 2'} secure={false} ref={ref1} />
<MyTextInput label={'label 1'} secure={true} ref={ref2} />
</Card>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Child
import React, { useState, useEffect } from 'react';
import { TextInput as RnTextInput, StyleSheet, View, Text } from 'react-native';
const styles = StyleSheet.create({
textInput: {
padding: 10,
marginRight: 10,
marginLeft: 10,
borderRadius: 50,
},
text: {
marginLeft: 20,
marginBottom: 10,
fontSize: 20,
},
});
const TextInput = React.forwardRef((props, ref) => {
const [text, setText] = useState('');
return (
<View>
{props.label && <Text style={styles.text}>{props.label}</Text>}
<RnTextInput
style={styles.textInput}
value={text}
onChange={(e) => {
setText(e.target.value);
}}
secureTextEntry={props.secure}
ref={ref}
/>
</View>
);
});
export default TextInput;
I used nested Text to add an image between the texts.
After that I tried to get the original string value but the string in the image is replaced with I.
import * as React from 'react';
import { Text, View, StyleSheet,TextInput,Button,Image } from 'react-native';
import Constants from 'expo-constants';
// or any pure javascript modules available in npm
export default class App extends React.Component {
state = {
text: '',
images:[],
}
changeText = (text) => {
this.setState({
text,
});
}
parseText = () => {
const { text,images } = this.state;
if (images.length !== 0){
return(
<Text>
{text}
{images}
</Text>
);
}
return text;
}
addImage = () => {
const { images } = this.state;
const newImage = (<Image
style={{width:20,height:20}}
source={require('./assets/snack-icon.png')} />);
this.setState({
images:[...images , newImage],
})
}
render() {
return (
<View style={styles.container}>
<TextInput
style={{flex:1}}
onChangeText={this.changeText}
placeholder="test"
>
{this.parseText()}
</TextInput>
<Button
title="add Image"
onPress={this.addImage}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
https://snack.expo.io/rkjP70hUS
This example is intended to illustrate the approximate situation but not the same as mine.
In this example, when you add an image and import text, the image comes out as I.
Can I change to the string instead of I?