red error screen 1
Cannot read property 'configureProps' of undefined
I was using the react-tab-view with react Hooks and typescript but I have some issues somebody could give me a hand...
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'reactnative';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
interface Props {
navigation: any;
}
export default function Home(props: Props) {
const [rar, setRar] = useState({
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]
});
var NativeAppEventEmitter = require('RCTNativeAppEventEmitter');
return (
<View>
<TouchableOpacity onPress={props.navigation.openDrawer}>
<Text>hola desde home</Text>
</TouchableOpacity>
<TabView
navigationState={rar}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
})}
onIndexChange={index => ({ index })}
initialLayout={{ width: Dimensions.get('window').width, height: 250 }}
/>
</View>
)
}
const styles = StyleSheet.create({
scene: {
flex: 0.3,
},
});
change
onIndexChange={index => ({ index })}
to
onIndexChange={index => setRar({ ...rar, index })}
that should fix the error you are facing
import React, { useState, useEffect } from 'react';
import { Container } from './styles';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const LatestRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const FavoritesRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const AllRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
export default function Main() {
const initialState = {
index: 0,
routes: [
{ key: 'latest', title: 'Latest' },
{ key: 'favorites', title: 'Favorites' },
{ key: 'all', title: 'All' },
],
};
const [ state, setState ] = useState(initialState);
function selectTab ( index ) {
this.initialState = {
index: index,
routes: [
{ key: 'latest', title: 'Latest' },
{ key: 'favorites', title: 'Favorites' },
{ key: 'all', title: 'All' },
],
};
return setState(this.initialState);
}
return (
<Container>
<TabView
navigationState={state}
renderScene={SceneMap({ latest: LatestRoute, favorites: FavoritesRoute, all: AllRoute })}
onIndexChange={ (index) => selectTab(index) }
initialLayout={{ width: Dimensions.get('window').width, height : Dimensions.get('window').height }}
/>
</Container>
);
}
Related
I am creating a mobile application. In this project, i created a tabview. I copied the code form an internet source and pasted in my application. Tab is shown normally. But when i swap to next tab, it gives me an error
in console screen. Here are the error details:
TypeError: undefined is not an object (evaluating 'this')
And here is my code:
import React, {useEffect, useState} from 'react';
import {View, StatusBar, Image, StyleSheet, Dimensions} from 'react-native';
import {Container, Button, Text, Header, Body} from 'native-base';
import {useNavigation} from '#react-navigation/native';
import {ScrollView} from 'react-native-gesture-handler';
import { TabView, SceneMap } from 'react-native-tab-view';
const LatestRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const FavoritesRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const AllRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const App = () => {
const initialState = {
index: 0,
routes: [
{ key: 'latest', title: 'Latest' },
{ key: 'favorites', title: 'Favorites' },
{ key: 'all', title: 'All' },
],
};
const [ state, setState ] = useState(initialState);
function selectTab ( index ) {
this.initialState = {
index: index,
routes: [
{ key: 'latest', title: 'Latest' },
{ key: 'favorites', title: 'Favorites' },
{ key: 'all', title: 'All' },
],
};
return setState(this.initialState);
}
let navigation = useNavigation();
return (
<Container>
<TabView
navigationState={state}
renderScene={SceneMap({ latest: LatestRoute, favorites: FavoritesRoute, all: AllRoute })}
onIndexChange={ (index) => selectTab(index) }
initialLayout={{ width: Dimensions.get('window').width, height : Dimensions.get('window').height }}
/>
</Container>
);
};
const styles = StyleSheet.create({
btns: {
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
justifyContent: 'center',
marginTop: '10%',
},
registerTitle: {
color: 'red',
textTransform: 'uppercase',
fontSize: 18,
},
scene: {
flex: 1,
},
});
export default App;
if anyone know the error let me know:
I am beginner with react native expo, just creating my first project. I am able to make a flat list and app is working great so far.
However now I need to make something like this,
As being newbie, I am not sure where to start, It seems like a webview is used but I am not sure how to put flatview into webview, or am I completely on wrong track ?
This is what I coded so far,
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
Result:
Code:
import React from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View } from "react-native";
class App extends React.Component {
state = {
data: [
{ id: "00", name: "Mazda RX-7" },
{ id: "01", name: "McLaren F1" },
{ id: "02", name: "Mini Cooper" },
{ id: "03", name: "BMW 645 Ci" }
]
};
render() {
const columns = 3;
return (
<SafeAreaView>
<FlatList
data={createRows(this.state.data, columns)}
keyExtractor={item => item.id}
numColumns={columns}
renderItem={({ item }) => {
if (item.empty) {
return <View style={[styles.item, styles.itemEmpty]} />;
}
return (
<View style={styles.item}>
<Text style={styles.text}>{item.name}</Text>
</View>
);
}}
/>
</SafeAreaView>
);
}
}
function createRows(data, columns) {
const rows = Math.floor(data.length / columns);
let lastRowElements = data.length - rows * columns;
while (lastRowElements !== columns) {
data.push({
id: `empty-${lastRowElements}`,
name: `empty-${lastRowElements}`,
empty: true
});
lastRowElements += 1;
}
return data;
}
const styles = StyleSheet.create({
item: {
alignItems: "center",
backgroundColor: "#dcda48",
flexBasis: 0,
flexGrow: 1,
margin: 4,
padding: 20
},
itemEmpty: {
backgroundColor: "transparent"
},
text: {
color: "#333333"
}
});
export default App;
Do you have any ideas?
P.S. I need a ListHeaderComponent
orig pic
You should add style in container and override other style like this
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
View
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
ListHeaderComponent={()=><View style={{height:80,backgroundColor:'red'}}/>}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
backgroundColor:'green'
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
How to set a value on text component when i clicked on an item of the flatlist in react-native?
I want to display the value of the flatlist on the text component. When I clicked on an item of a flatlist. So please help me how i can achieve this functionality.
This is the working example as below , please also find the code and if you have any doubts please check :
expo-snack
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
TextInput
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => {onSelect(id)}}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected, setSelected] = React.useState(new Map());
const [textValue, setValueText] = React.useState(0);
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
setValueText(id)
},
[selected],
);
return (
<SafeAreaView style={styles.container}>
<TextInput style={{height:80,width:300}} value={textValue}/>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
Hope it helps. feel free for doubts
kindly pass argument onselect function using below code and check out
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
TextInput
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => {onSelect(id)}}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected, setSelected] = React.useState(new Map());
const [textValue, setValueText] = React.useState("");
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
setValueText(id)
},
[selected],
);
const showTitle = (title) =>{
setValueText(title)
}
return (
<SafeAreaView style={styles.container}>
<TextInput style={{height:80,width:300}} value={textValue}/>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={()=>showTitle(item.title)}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
My problem is that I cannot do a subheader manually either because of flatlist. if I put any content where the flatlist goes the functionality of the flatlist its broken, when I scroll to the bottom to do the OnEndReached(the infinite scroll) I get back to to the top, that only happen like I said when I have content in the screen besides my flatlist, so that why I was asking if there is a possible way to do it with router-flux maybe in that way I will not have this problem.
I tried putting a View like first tag and do a manually subheader but it doesn't work.
EDIT:
Here is the image of what i have now, is there anyway to do horizontal scroll in the subheader instead of having all the tabs stacked
EDIT 2: I solved it using this plugin:
https://github.com/react-native-community/react-native-tab-view. This is my code:
import * as React from 'react';
import { Component } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import PostsList from '../../postsList';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View>
<PostsList />
</View>
);
const SecondRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const ThirdRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const FourRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const FiveRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};
export default class Home extends Component {
constructor() {
super();
this.state = {
isData: true,
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
{ key: 'third', title: 'Third' },
{ key: 'four', title: 'Four' },
{ key: 'five', title: 'Five' },
]
};
}
_renderTabBar = props => (
<TabBar
{...props}
scrollEnabled
indicatorStyle={styles.indicator}
style={styles.tabbar}
tabStyle={styles.tab}
labelStyle={styles.label}
/>
);
_renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
four: FourRoute,
five: FiveRoute
})
_handleIndexChange = index =>
this.setState({
index,
});
render() {
return (
<TabView
navigationState={this.state}
renderTabBar={this._renderTabBar}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tabbar: {
backgroundColor: '#3f51b5',
},
tab: {
width: 120,
},
indicator: {
backgroundColor: '#ffeb3b',
},
label: {
color: '#fff',
fontWeight: '400',
},
});
This is the scrollable tabs