Develop Reference

React Native, the ActivityIndicator is not shown because data inside Flatlist are rendered too quickly, but not enough

I'm new with React Native and I'm trying to display a very long flatlist.
More specifically there are two arrays (a movies one and a tvs one). When I tap a specific switch I want to swap the array. So in order to make the app render the items faster while swapping "category" I've decided to use the onEndReached props and render 10 items at a time.
I'm fetching the whole two arrays during the componentDidMount method.
Now when I reach the end of the list and the 10 more items are being displayed I also want to show an ActivityIndicator.
My problem is that when I set my loading state to true and I add the other items to the displyedProducts array, then I set back again to false the loading state in order to hide the indicator, my indicator is never shown because the loading state changes too quickly although there's a full second to wait before the new elements are rendered while using the app.
Here there is the specific code block which load new items:
loadMore = () => {
const {
displayedProducts,
products,
tvs,
movies,
searchedMovies,
isSearching,
} = this.state;
const tempArray = displayedProducts;
if (
(products === 'movies' && tempArray.length === movies.length) ||
(products === 'tvs' && tempArray.length === tvs.length) ||
(isSearching && tempArray.length === searchedMovies.length)
) {
return;
}
this.setState({loading: true}, () => {
products === 'movies' &&
tempArray.push(
...movies.slice(tempArray.length, tempArray.length + 10),
);
products === 'tvs' &&
tempArray.push(...tvs.slice(tempArray.length, tempArray.length + 10));
this.setState({displayedProducts: tempArray}, () => {
this.state.loading && this.setState({loading: false});
});
});
};
I've also tried to set to false the loading state in the componentDidUpdate method but nothing changed.
Do you guys know how can I solve this problem?
I'll leave here the whole component code:
import React from 'react';
import {
SafeAreaView,
FlatList,
StatusBar,
StyleSheet,
View,
ActivityIndicator,
} from 'react-native';
import {sortBy} from 'lodash';
import {getMovies, getTvs} from '../Services/MovieManager';
import Header from '../components/Header';
import MovieCard from '../components/MovieCard';
import NavigationSwitch from '../components/NavigationSwitch';
class HomeView extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
movies: [],
tvs: [],
displayedProducts: [],
searchedMovies: [],
products: 'movies',
isSearching: false,
loading: false,
};
this.flatListRef = React.createRef(null);
}
componentDidMount() {
this.fetchProducts();
}
fetchProducts = () => {
getMovies()
.then(movies => {
const moviesList = sortBy(movies.items, movie => movie.title);
this.setState({
movies: moviesList,
displayedProducts: moviesList.slice(0, 10),
});
})
.then(
getTvs().then(tvs => {
const tvsList = sortBy(tvs.items, tv => tv.title);
this.setState({tvs: tvsList});
}),
);
};
navigate = item => () => {
this.props.navigation.navigate('Movie', {movie: item});
};
renderItem = ({item}) => (
<MovieCard movie={item} onPress={this.navigate(item)} />
);
ItemSeparator = () => <View style={styles.itemSeparator} />;
getSearchedResults = searchedString => {
const {products, movies, tvs} = this.state;
let tempProducts = [];
const regEx = new RegExp(`\\b${searchedString.toLowerCase()}`);
searchedString
? this.setState({isSearching: true})
: this.setState({isSearching: false});
((products === 'movies' && movies) || (products === 'tvs' && tvs)).forEach(
product => {
product.title.toLowerCase().match(regEx) && tempProducts.push(product);
},
);
this.setState({
searchedMovies: tempProducts,
displayedProducts: tempProducts.slice(0, 10),
});
this.flatListRef.scrollToOffset({animated: true, offset: 0});
};
setList = result => {
const {movies, tvs} = this.state;
this.setState({
products: result,
displayedProducts: (
(result === 'movies' && movies) ||
(result === 'tvs' && tvs)
).slice(0, 10),
});
this.flatListRef.scrollToOffset({animated: true, offset: 0});
};
loadMore = () => {
const {
displayedProducts,
products,
tvs,
movies,
searchedMovies,
isSearching,
} = this.state;
const tempArray = displayedProducts;
if (
(products === 'movies' && tempArray.length === movies.length) ||
(products === 'tvs' && tempArray.length === tvs.length) ||
(isSearching && tempArray.length === searchedMovies.length)
) {
return;
}
this.setState({loading: true}, () => {
products === 'movies' &&
tempArray.push(
...movies.slice(tempArray.length, tempArray.length + 10),
);
products === 'tvs' &&
tempArray.push(...tvs.slice(tempArray.length, tempArray.length + 10));
this.setState({displayedProducts: tempArray}, () => {
this.state.loading && this.setState({loading: false});
});
});
};
render() {
const {displayedProducts, loading} = this.state;
return (
<>
<StatusBar barStyle="dark-content" backgroundColor="white" />
<Header
title="Home"
getSearchedResults={search => {
this.getSearchedResults(search);
}}
style={styles.header}
/>
<View style={styles.mainContent}>
<NavigationSwitch setList={this.setList} />
<SafeAreaView>
<FlatList
ref={ref => (this.flatListRef = ref)}
data={displayedProducts}
numColumns={2}
keyExtractor={item => item.id}
renderItem={this.renderItem}
columnWrapperStyle={{justifyContent: 'space-around'}}
ItemSeparatorComponent={this.ItemSeparator}
contentContainerStyle={styles.flatList}
initialNumToRender={10}
maxToRenderPerBatch={10}
onEndReached={this.loadMore}
/>
</SafeAreaView>
{loading && <ActivityIndicator style={styles.indicator} />}
</View>
</>
);
}
}
const styles = StyleSheet.create({
mainContent: {
elevation: 2,
height: '100%',
zIndex: -1,
elevation: -1,
},
flatList: {
paddingVertical: 80,
zIndex: -1,
},
itemSeparator: {
height: 25,
width: '100%',
},
indicator: {
flex: 1,
alignSelf: 'center',
bottom: 100,
elevation: 4,
},
});
export default HomeView;

How to check a textInput on emptiness

I need your help. I want to check my textInput for an empty filed, when I am pressing a button. Because now my application can route user to target page with empty fields. So I need to check this fields on emptyness. But I don't know how to do it. I will be very glad, if you help me.
This is my component
import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle, InputStyle } from '../constants/styles'
import { LOG_IN } from '../routes'
export class SignIn extends Component {
state = {
isValidPasword: true,
isEqual: true,
isValidMail: true,
currentPassword: ''
}
isEnoughSymbols = (text) => {
if (text.trim().length < 8) {
this.setState({ isValidPasword: false })
}
else {
this.setState({ currentPassword: text, isValidPasword: true })
}
}
isMatch = (text) => {
if (text != this.state.currentPassword) {
this.setState({ isEqual: false })
}
}
isMail = (text) => {
const pattern = /\b[a-z0-9._]+#[a-z0-9.-]+\.[a-z]{2,4}\b/i
let res = text.search(pattern)
res == -1 ? this.setState({ isValidMail: false }) : this.setState({ isValidMail: true })
}
render() {
const { mainContainer, buttons } = FormStyle
const { container, text } = InputStyle
const { isValidPasword, isEqual, isValidMail, currentPassword } = this.state
return (
<View style={mainContainer}>
<View style={container}>
<TextInput
style={text}
placeholder={'Email'}
onEndEditing={(e) => this.isMail(e.nativeEvent.text)}
>
</TextInput>
{
isValidMail ? null : <ErrorMessage errorText={'Invalid email!'} />
}
</View>
<View style={container}>
<TextInput
style={text}
placeholder={'Password'}
secureTextEntry={true}
onEndEditing={(e) => this.isEnoughSymbols(e.nativeEvent.text)}
>
</TextInput>
{
isValidPasword ? null : <ErrorMessage errorText={'Password must have at least 8 symbols!'} />
}
</View>
<View style={container}>
<TextInput
style={text}
secureTextEntry={true}
placeholder={'Confirm password'}
>
</TextInput>
{
isEqual ? null : <ErrorMessage errorText={'Passwords not matching'} />
}
</View>
<View style={buttons}>
<MyButton
name={'confirm'.toUpperCase()}
onPress={() => (isEqual && isValidMail && isValidPasword) ? this.props.navigation.navigate(LOG_IN) : alert('Your data is wrong!')} />
</View>
</View>
)
}
}

Set the value of the text input using state.
E.g.
state = {
/// rest of state
textValue: ""
}
In the TextInput component add a function to set the state onChange, so the textValue changes when the user types, e.g. (e) => this.setState({ textValue: e.nativeEvent.text })
Then you can check if the input is empty with a function that checks for the state value, like if(this.textValue === "") and then handle the empty vs. not-empty condition.

Better way you can make function like this to check empty spaces, Blank value and text length.
function isEmpty(isFieldEmpty) {
isFieldEmpty = isFieldEmpty.trim()
if (!isFieldEmpty || isFieldEmpty == "" || isFieldEmpty.length <= 0) {
return true;
}
else {
return false;
}
}

React Native Animation onSubmitEditing

can someone tell me why this animation will only run after click the second time on "next" button?
I know its something related to my if checks but if setTocuhed triggers correctly (making the things red) why the animate doesn't?
ive already tried a couple of things but none has worked
import React from 'react';
import { Animated, Text, View, Easing } from 'react-native';
import { withNavigationFocus } from 'react-navigation';
import Input from '../../components/UI/Input';
import registerStyles from './registerStyles';
type props = {
navigation: {
navigate: (arg: string) => void;
};
};
const validation = (input: string) => {
if (input.length < 6) {
return 'min length 6';
}
if (input.length > 30) {
return 'max length: 30';
}
return null;
};
const FullName = (props: props) => {
const [input, setInput] = React.useState<string>('');
const [touched, setTouched] = React.useState<boolean>(false);
const [errorMessage, setErrorMessage] = React.useState<string | null>('');
const viewRef = new Animated.Value(10);
const animate = () => {
return Animated.timing(viewRef, {
toValue: 22,
easing: Easing.elastic(100),
duration: 200,
useNativeDriver: false
}).start(() => {
Animated.timing(viewRef, {
toValue: 10,
duration: 0,
useNativeDriver: false
}).start();
});
};
return (
<Animated.View style={[registerStyles.screen, { paddingLeft: viewRef }]}>
<Input
touched={touched}
value={input}
onChange={(value) => setInput(value)}
autoFocus={true}
returnKeyType='next'
label='Full name'
onSubmitEditing={() => {
const validate = validation(input);
setErrorMessage(() => validate);
if (validate === null) {
setInput(() => '');
setTouched(() => false);
props.navigation.navigate('Email');
return;
}
if (validate !== null) {
animate();
setTouched(() => true);
}
}}
/>
<Text style={registerStyles.error}>{touched && errorMessage}</Text>
</Animated.View>
);
};
export default withNavigationFocus(FullName);
this is the Input component if needed:
const Input = (props: IInput) => {
const errorColor = props.touched ? colors.red : colors.black;
const errorStyles = {
textField: {
borderBottomColor: errorColor
},
label: {
color: errorColor
}
};
return (
<View style={styles.inputContainer}>
<Text style={[styles.label, errorStyles.label]}>{props.label}</Text>
<TextInput
autoCapitalize={props.autoCapitalize}
onChangeText={(value) => props.onChange(value)}
value={props.value}
autoFocus={props.autoFocus}
ref={(input) => {
if (props.inputRef) {
return props.inputRef(input);
}
}}
style={[styles.textField, errorStyles.textField]}
onSubmitEditing={props.onSubmitEditing}
returnKeyType={props.returnKeyType}
blurOnSubmit={false}
/>
</View>
);
};

Insert viewRef inside useRef hook.
const viewRef = React.useRef(new Animated.Value(10)).current;
In this case, React will keep tracking its value and don't lose it after rerendering.

I need the below code written as React Hooks. Is it possible to write it so?

I am using react hooks mostly in my current app. I need the below code expressed as react hooks, without the this.state and this.props. My current app is expressed entirely as React Hooks. If you see it closely, the below code is writing out SQL query code with the click of a button. I need that functionality in my current app, but I don't know how to assimilate that in my app. Any ideas?
import React from 'react';
import { Row, Col, Tabs, Spin, Card, Alert, Tooltip, Icon, Button } from 'antd';
import cubejs from '#cubejs-client/core';
import { QueryRenderer } from '#cubejs-client/react';
import sqlFormatter from "sql-formatter";
import JSONPretty from 'react-json-pretty';
import Prism from "prismjs";
import "./css/prism.css";
const HACKER_NEWS_DATASET_API_KEY = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpIjozODU5NH0.5wEbQo-VG2DEjR2nBpRpoJeIcE_oJqnrm78yUo9lasw'
class PrismCode extends React.Component {
componentDidMount() {
Prism.highlightAll();
}
componentDidUpdate() {
Prism.highlightAll();
}
render() {
return (
<pre>
<code className='language-javascript'>
{ this.props.code }
</code>
</pre>
)
}
}
const tabList = [{
key: 'code',
tab: 'Code'
}, {
key: 'sqlQuery',
tab: 'Generated SQL'
}, {
key: 'response',
tab: 'Response'
}];
class CodeExample extends React.Component {
constructor(props) {
super(props);
this.state = { activeTabKey: 'code' };
}
onTabChange(key) {
this.setState({ activeTabKey: key });
}
render() {
const { codeExample, resultSet, sqlQuery } = this.props;
const contentList = {
code: <PrismCode code={codeExample} />,
response: <PrismCode code={JSON.stringify(resultSet, null, 2)} />,
sqlQuery: <PrismCode code={sqlQuery && sqlFormatter.format(sqlQuery.sql())} />
};
return (<Card
type="inner"
tabList={tabList}
activeTabKey={this.state.activeTabKey}
onTabChange={(key) => { this.onTabChange(key, 'key'); }}
>
{ contentList[this.state.activeTabKey] }
</Card>);
}
}
const Loader = () => (
<div style={{textAlign: 'center', marginTop: "50px" }}>
<Spin size="large" />
</div>
)
const TabPane = Tabs.TabPane;
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { showCode: false };
}
render() {
const { query, codeExample, render, title } = this.props;
return (
<QueryRenderer
query={query}
cubejsApi={cubejs(HACKER_NEWS_DATASET_API_KEY)}
loadSql
render={ ({ resultSet, sqlQuery, error, loadingState }) => {
if (error) {
return <Alert
message="Error occured while loading your query"
description={error.message}
type="error"
/>
}
if (resultSet && !loadingState.isLoading) {
return (<Card
title={title || "Example"}
extra={<Button
onClick={() => this.setState({ showCode: !this.state.showCode })}
icon="code"
size="small"
type={this.state.showCode ? 'primary' : 'default'}
>{this.state.showCode ? 'Hide Code' : 'Show Code'}</Button>}
>
{render({ resultSet, error })}
{this.state.showCode && <CodeExample resultSet={resultSet} codeExample={codeExample} sqlQuery={sqlQuery}/>}
</Card>);
}
return <Loader />
}}
/>
);
}
};
export default Example;

It's quite easy to convert a class to a functional component.
Remember these steps:
class => const
// Class
export class Example
// FC
export const Example
componentLifeCycles => useEffect
// Class lifecycle
componentDidMount() {
// logic here
}
// FC
useEffect(() => {
// logic here
})
render => return
// Class
render () {
return (<Component/>)
}
// FC
return (<Component />)`
constructor => useState
// Class
constructor(props) {
this.state.val = props.val
}
// FC
const [val, setVal] = useState(props.val)
setState => second arg from useState
// Class
constructor() {
this.state.val = val // constructor
}
this.setState({ val }) // class
// FC
const[val, setVal] = useState(null)
setVal("someVal")
TLDR: Solution
import React, { useEffect, useState } from "react"
import { Tabs, Spin, Card, Alert, Button } from "antd"
import cubejs from "#cubejs-client/core"
import { QueryRenderer } from "#cubejs-client/react"
import sqlFormatter from "sql-formatter"
import Prism from "prismjs"
import "./css/prism.css"
const HACKER_NEWS_DATASET_API_KEY =
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpIjozODU5NH0.5wEbQo-VG2DEjR2nBpRpoJeIcE_oJqnrm78yUo9lasw"
const PrismCode: React.FC = ({ code }) => {
useEffect(() => {
Prism.highlightAll()
})
return (
<pre>
<code className="language-javascript">{code}</code>
</pre>
)
}
const TabList = [
{
key: "code",
tab: "Code",
},
{
key: "sqlQuery",
tab: "Generated SQL",
},
{
key: "response",
tab: "Response",
},
]
const CodeExample: React.FC = ( { codeExample, resultSet, sqlQuery } ) => {
const [activeTabKey, setActiveTab] = useState("code")
const onTabChange = (key) => setActiveTab(key)
const contentList = {
code: <PrismCode code={codeExample} />,
response: <PrismCode code={JSON.stringify(resultSet, null, 2)} />,
sqlQuery: (
<PrismCode code={sqlQuery && sqlFormatter.format(sqlQuery.sql())} />
),
}
return (
<Card
type="inner"
tabList={TabList}
activeTabKey={activeTabKey}
onTabChange={(key) => {
onTabChange(key)
}}
>
{contentList[activeTabKey]}
</Card>
)
}
const Loader = () => (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<Spin size="large" />
</div>
)
const TabPane = Tabs.TabPane
const Example: React.FC = ({ query, codeExample, render, title }) => {
const [showCode, toggleCode] = useState(false)
return (
<QueryRenderer
query={query}
cubejsApi={cubejs(HACKER_NEWS_DATASET_API_KEY)}
loadSql
render={({ resultSet, sqlQuery, error, loadingState }) => {
if (error) {
return (
<Alert
message="Error occured while loading your query"
description={error.message}
type="error"
/>
)
}
if (resultSet && !loadingState.isLoading) {
return (
<Card
title={title || "Example"}
extra={
<Button
onClick={() =>
toggleCode(!this.state.showCode)
}
icon="code"
size="small"
type={showCode ? "primary" : "default"}
>
{showCode ? "Hide Code" : "Show Code"}
</Button>
}
>
{render({ resultSet, error })}
{showCode && (
<CodeExample
resultSet={resultSet}
codeExample={codeExample}
sqlQuery={sqlQuery}
/>
)}
</Card>
)
}
return <Loader />
}}
/>
)
}
export default Example

React Bottleneck TextInput Inputfield

I've got a big react app (with Redux) here that has a huge bottleneck.
We have implemented a product search by using product number or product name and this search is extremely laggy.
Problem: If a user types in some characters, those characters are shown in the InputField really retarded. The UI is frozen for a couple of seconds.
In Internet Explorer 11, the search is almost unusable.
It's a Material UI TextField that filters products.
What I already did for optimization:
Replaced things like style={{
maxHeight: 230,
overflowY: 'scroll',
}} with const cssStyle={..}
Changed some critical components from React.Component to React.PureComponent
Added shouldComponentUpdate for our SearchComponent
Removed some unnecessary closure bindings
Removed some unnecessary objects
Removed all console.log()
Added debouncing for the input field (that makes it even worse)
That's how our SearchComponent looks like at the moment:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Downshift from 'downshift';
import TextField from '#material-ui/core/TextField';
import MenuItem from '#material-ui/core/MenuItem';
import Paper from '#material-ui/core/Paper';
import IconTooltip from '../helper/icon-tooltip';
import { translate } from '../../utils/translations';
const propTypes = {
values: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
legend: PropTypes.string,
helpText: PropTypes.string,
onFilter: PropTypes.func.isRequired,
selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
isItemAvailable: PropTypes.func,
};
const defaultProps = {
legend: '',
helpText: '',
selected: '',
isItemAvailable: () => true,
};
const mapNullToDefault = selected =>
(selected === null || selected === undefined ? '' : selected);
const mapDefaultToNull = selected => (!selected.length ? null : selected);
class AutoSuggestField extends Component {
shouldComponentUpdate(nextProps) {
return this.props.selected !== nextProps.selected;
}
getLegendNode() {
const { legend, helpText } = this.props;
return (
<legend>
{legend}{' '}
{helpText && helpText.length > 0 ? (
<IconTooltip helpText={helpText} />
) : (
''
)}
</legend>
);
}
handleEvent(event) {
const { onFilter } = this.props;
const value = mapDefaultToNull(event.target.value);
onFilter(value);
}
handleOnSelect(itemId, item) {
const { onFilter } = this.props;
if (item) {
onFilter(item.label);
}
}
render() {
const { values, selected, isItemAvailable } = this.props;
const inputValue = mapNullToDefault(selected);
const paperCSSStyle = {
maxHeight: 230,
overflowY: 'scroll',
};
return (
<div>
<div>{this.getLegendNode()}</div>
<Downshift
inputValue={inputValue}
onSelect={(itemId) => {
const item = values.find(i => i.id === itemId);
this.handleOnSelect(itemId, item);
}}
>
{/* See children-function on https://github.com/downshift-js/downshift#children-function */}
{({
isOpen,
openMenu,
highlightedIndex,
getInputProps,
getMenuProps,
getItemProps,
ref,
}) => (
<div>
<TextField
className="searchFormInputField"
InputProps={{
inputRef: ref,
...getInputProps({
onFocus: () => openMenu(),
onChange: (event) => {
this.handleEvent(event);
},
}),
}}
fullWidth
value={inputValue}
placeholder={translate('filter.autosuggest.default')}
/>
<div {...getMenuProps()}>
{isOpen && values && values.length ? (
<React.Fragment>
<Paper style={paperCSSStyle}>
{values.map((suggestion, index) => {
const isHighlighted = highlightedIndex === index;
const isSelected = false;
return (
<MenuItem
{...getItemProps({ item: suggestion.id })}
key={suggestion.id}
selected={isSelected}
title={suggestion.label}
component="div"
disabled={!isItemAvailable(suggestion)}
style={{
fontWeight: isHighlighted ? 800 : 400,
}}
>
{suggestion.label}
</MenuItem>
);
})}
</Paper>
</React.Fragment>
) : (
''
)}
</div>
</div>
)}
</Downshift>
</div>
);
}
}
AutoSuggestField.propTypes = propTypes;
AutoSuggestField.defaultProps = defaultProps;
export default AutoSuggestField;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>
It seems, that I did not find the performance problem as it still exists. Can someone help here?