React Native Flip Card not Working on flip - javascript

I am trying to make a flip card game. I used GestureFlipView for flip card animation. I want to display these flip card in 3X3 grid and for that I have used from react native. But the problem occurs that cards are not getting flipped and it is showing vague behaviour as well. Just the last card working fine and other cards are doing unpredictable behaviour.
Github Repo: https://github.com/akhilomar/React-Native-Number-Game
CardScreen: https://i.stack.imgur.com/Cliww.png
Card Component
import {View, Text, SafeAreaView, TouchableOpacity} from 'react-native';
import GestureFlipView from 'react-native-gesture-flip-card';
const Cards = (props) => {
const [flipType, setFlip] = useState('left');
useEffect(() => {
})
const renderFront = () => {
return(
<TouchableOpacity onPress = {() => {
this.flipView.flipRight()
setFlip('right');
console.log("Pressed" + `${props.val}`)
}} >
<View style = {{backgroundColor:'red', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'}}>
<Text style = {{color: "white", fontSize: 20}}>Swipe Me</Text>
</View>
</TouchableOpacity>
);
};
const renderBack = () => {
return(
<View style = {{backgroundColor:'blue', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'}}>
<Text style = {{color: "white", fontSize: 30}}>{props.val}</Text>
{/* <TouchableOpacity onPress = {() => {
(flipType === 'left') ? this.flipView.flipRight() : this.flipView.flipLeft();
setFlip((flipType === 'left') ? 'right' : 'left');
}} style = {{padding: 10, backgroundColor: 'purple', width: 100, height: 40, alignItems: 'center', justifyContent: 'center'}}>
<Text style = {{color: 'white'}}>Reverse</Text>
</TouchableOpacity> */}
</View>
);
};
//ref = {(ref) => this.flipView = ref}
return(
<SafeAreaView style = {{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<GestureFlipView ref = {(ref) => this.flipView = ref} width={300} height = {500}>
{renderFront()}
{renderBack()}
</GestureFlipView>
</SafeAreaView>
);
}
export default Cards;```
**Card List Component**
```import React from 'react';
import {SafeAreaView, View, FlatList, Dimensions, StyleSheet } from 'react-native';
import Cards from './Cards';
const CardScreen = () => {
// const data = ['1','2','3','4','5','6','7','8','9'];
const DATA = [
{
id: '1',
title: '1',
},
{
id: '2',
title: '2',
},
{
id: '3',
title: '3',
},
{
id: '4',
title: '4',
},
{
id: '5',
title: '5',
},
{
id: '6',
title: '6',
},
{
id: '7',
title: '7',
},
{
id: '8',
title: '8',
},
{
id: '9',
title: '9',
}
];
const Shuffle = (arr1) => {
var ctr = arr1.length, temp, index;
while (ctr > 0) {
index = Math.floor(Math.random() * ctr);
ctr--;
temp = arr1[ctr];
arr1[ctr] = arr1[index];
arr1[index] = temp;
}
return arr1;
}
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;
const styles = StyleSheet.create({
itemContainer: {
width: size,
height: size,
},
item: {
flex: 1,
margin: 3,
backgroundColor: 'lightblue',
}
});
return(
<>
<FlatList
data={DATA}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<Cards val = {item.value}/>
</View>
)}
keyExtractor={item => item.id}
numColumns={numColumns} />
{/* {
data.map((index, item) => {
return(
<View style={styles.itemContainer}>
<Cards val = {item}/>
</View>
);
})
} */}
</>
);
}
export default CardScreen;```

You need to use ref correctly. you can Read about it here
const Cards = (props) => {
//first define ref
const flipViewRef = React.useRef();
//in onPress use it like this
<TouchableOpacity onPress = {() => {
flipViewRef.current.flipRight()
...
}} >
//in GestureFlipView assign it like this
<GestureFlipView ref={flipViewRef} />
}

The primary cause of your troubles is the fact that you are using a this reference within a functional component. As explained here, the value of this will be determined by how the function is called, and might even be undefined. A more reliable approach of using this is from a class context. For React, that means using a class component, rather than a functional component, which is what is being used here. You can read about function and class components here.
Something else to consider is if a FlatList is appropriate here. Typically, this component is used to improve performance for rendering large lists. Instead of using a FlatList, I would recommend using something simpler, such as a set of View components to draw the cards. Here is a complete example based on your code:
import React, { useState } from 'react';
import { View, Dimensions, StyleSheet, Text, TouchableOpacity } from 'react-native';
import GestureFlipView from 'react-native-gesture-flip-card';
const Card = (props: any) => {
const [flipType, setFlip] = useState('left');
let flipView: any;
const onFrontPress = () => {
flipView.flipRight()
setFlip('right');
}
const cardDimensions = { width: 0.9 * props.size, height: 0.9 * props.size };
const renderFront = () => {
return (
<TouchableOpacity onPress={onFrontPress} style={[styles.front, cardDimensions]}>
<Text style={styles.frontText}>Swipe Me</Text>
</TouchableOpacity>
);
};
const renderBack = () => {
return (
<View style={[styles.back, cardDimensions]}>
<Text style={styles.backText}>{props.val}</Text>
</View>
);
};
return (
<GestureFlipView ref={(ref) => flipView = ref} width={props.size} height={props.size}>
{renderFront()}
{renderBack()}
</GestureFlipView>
);
}
const CardRow = () => {
const size = Dimensions.get('window').width / 3;
return (
<View style={styles.rowContainer}>
<Card size={size} />
<Card size={size} /{ width: 0.9 * props.size, height: 0.9 * props.size }>
<Card size={size} />
</View>
);
}
const CardScreen = () => {
return (
<View style={styles.container}>
<CardRow />
<CardRow />
<CardRow />
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
back: {
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
backText: {
color: "white",
fontSize: 30
},
front: {
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
},
frontText: {
color: "white",
fontSize: 20
}
});
export default CardScreen;

Related

I want to verify a value using text input from an array, but I am not getting an output

I want to input a value, which will be compared to my dummy data, and once the value is compared, i'll get an alert if the value is matched or not
//UPDATE - I have made some changes to the code, not the alert is working, but the values are not being matched. only getting the second alert - Error.
import { View, Text, FlatList, TextInput, StyleSheet, TouchableOpacity, Button } from 'react-native'
import React, {useState} from 'react'
import { CATEGORIES } from '../DummyData/dummy-data'
const renderGridItem = (itemData) =>{
return (
<View style={{marginVertical:5,marginVertical:15, flex:1, margin:15}}>
<Text style={{color:'black'}}>
{itemData.item.id}
</Text>
</View>
)
}
const Meals = props => {
const [text, onChangeText] = useState();
var onClick = () => {
if (renderGridItem === text){
alert("ID Matched");
}
else{
alert('Error')
}
}
console.log(text)
return (
<View>
<FlatList keyExtractor={(item, index) => item.id}
data={CATEGORIES}
numColumns={2}
renderItem={renderGridItem} />
<TextInput
style={styles.tip}
placeholder='Enter CNIC'
keyboardType='default'
onChangeText={onChangeText}
value={text}
/>
<TouchableOpacity style={styles.top} onPress={() => { ()=>onChangeText(text); onClick()} }>
<Text style={{textAlign:'center'}}>
Enter
</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
tip:{
borderWidth:1,
marginVertical:50,
borderRadius:8
},
top:{
width:'30%',
borderWidth:1,
marginLeft:140,
padding: 10,
borderRadius:8
},
})
export default Meals
//Dummy-Data (Array)
import Data from "../Model/Data";
export const CATEGORIES = [
new Data('c1', 'Person 1', '#f5428d'),
new Data('c3', 'Person 2', '#f5a442'),
];
//Data
class Data {
constructor(id, title){
this.id=id,
this.title=title
}
}
export default Data
Please check the code it might be helpful to you.
import React, { useState, useEffect } from "react";
import {
StyleSheet,
SafeAreaView,
TextInput,
View,
Text,
Button,
TouchableOpacity,
} from "react-native";
const App = () => {
const [text, setText] = useState("");
function onPressButton() {
var result = DATA.some((item, index) => item.title == text);
if (result == true) {
alert("DATA Found");
} else {
alert("DATA not found");
}
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TextInput
style={{ borderBottomWidth: 1, width: "90%", padding: 10 }}
placeholder="Enter Title"
onChangeText={(text) => setText(text)}
/>
<TouchableOpacity
style={{
width: 100,
height: 50,
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
marginTop: 20,
}}
onPress={onPressButton}
>
<Text>Find</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const DATA = [
{ id: 1, title: "ABC" },
{ id: 2, title: "XYZ" },
];
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
},
});
export default App;
OUTPUT:

How can I properly layer elements in JavaScript?

I am working on a (what I thought was) simple agenda app. Using React-Native Calendars to add an Agenda to my page. I wanted to create functionality to add items to the Agenda. I added a placeholder API to fill the Agenda with items so I can add additional styling before I enter in my own logic. I am trying to add a "+" button that will open a prompt to add an item to the Agenda. However, I cannot get the item to stack on top of the Agenda View.
import * as React from 'react';
import {View, StyleSheet, Text, TouchableOpacity, TouchableOpacityComponent, Platform} from 'react-native';
import {Agenda} from 'react-native-calendars';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {useEffect, useState} from "react";
import {addDays, format} from 'date-fns';
import {KeyboardAvoidingView, Touchable} from "react-native-web";
import {ScrollView} from "react-native-gesture-handler";
export default function CalendarView() {
type Item = {
name: string;
}
type Post = {
id: number;
title: string;
body: string;
userId: number;
};
const [items, setItems] = useState();
useEffect(() => {
// run once
const getData = async () => {
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts',
);
const data: Post[] = await response.json();
const mappedData = data.map((post, index) => {
const date = addDays(new Date(), index);
return {
...post,
date: format(date, 'yyyy-MM-dd'),
}
})
const reduced = mappedData.reduce(
(acc: { [key: string]: Post[] }, currentItem) => {
const {date, ...coolItem} = currentItem;
acc[date] = [coolItem];
return acc;
},
{},
)
setItems(reduced);
}
getData();
}, []);
const renderItem = (item: Item) => {
return (
<View style={styles.itemContainer}>
<Text>{item.name}</Text>
</View>
);
};
return (
<View style={styles.container}>
<Agenda items={items} renderItem={renderItem}
style={styles.calendarWrapper}
scrollEnabled={true}
theme={{
// calendarBackground: '#000000'
todayTextColor: '#00adf5',
}}>
</Agenda>
<View behavior={Platform.OS === "ios" ? "padding" : "height"}>
<TouchableOpacity onPress={() => console.log("button pressed")}>
<View style={styles.addWrapper}>
<Ionicons name={'add-outline'} size={30} color={'black'}/>
</View>
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
calendarWrapper: {},
items: {},
dayPressColor: {
backgroundColor: '#000000'
},
itemContainer: {
backgroundColor: 'white',
margin: 5,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
addWrapper: {
width: 100,
height: 100,
backgroundColor: '#55BCF6',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
shadowRadius: 5,
shadowOpacity: 100
},
})
Image of the UI so Far
I am extremely new to JS and CSS in general so any help would be appreciated. If I can't get a button to be placed correctly where I want it, then adding the functionality will definitely be a challenge!

How to useState hooks with array

I am not able to push the number index in the array of useState.
Where I am going wrong, do I want to push the index of numbers when I click them?
I am extracting the previous state array and then I push new but nothing happens.
How to push a new element inside useState array React hook? My code doesn't work!!
Please someone check.
Game.js
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import RandomNumber from "./RandomNumber";
export default function Game(props) {
const [state, setstate] = useState([]);
let randomNumber = Array.from({ length: props.randomNumberCount }).map(
() => 1 + Math.floor(10 * Math.random())
);
let target = randomNumber
.slice(0, props.randomNumberCount - 2)
.reduce((acc, curr) => acc + curr, 0);
const isNumberSelected = (numberIndex) => {
return state.indexOf(numberIndex) >= 0;
};
const selectNumber = (numberIndex) => {
setstate((arr) => [...arr, numberIndex]);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Target Sum Game</Text>
<Text style={styles.target}>{target}</Text>
<View style={styles.randomContainer}>
{randomNumber.map((randomNumber, index) => (
<RandomNumber
key={index}
id={index}
number={randomNumber}
isSelected={isNumberSelected(index)}
onClick={() => selectNumber}
/>
))}
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ddd",
paddingTop: 30,
},
target: {
fontSize: 30,
backgroundColor: "#aaa",
margin: 50,
marginHorizontal: 70,
textAlign: "center",
},
header: {
fontSize: 35,
backgroundColor: "dodgerblue",
textAlign: "center",
marginHorizontal: 30,
marginTop: 50,
},
randomContainer: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-around",
},
});
RandomNumber.js
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
export default function RandomNumber(props) {
const handlePress = () => {
props.onClick(props.id);
};
return (
<TouchableOpacity onPress={handlePress()}>
<Text style={[styles.random, props.isSelected && styles.selected]}>
{props.number}
</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
random: {
backgroundColor: "#999",
width: 100,
marginHorizontal: 35,
marginVertical: 25,
fontSize: 35,
textAlign: "center",
},
selected: {
opacity: 0.3,
},
});
you are not calling the function
onClick={() => selectNumber(index)}
You need to change the onClick prop and pass the randomNumber (or index depending of what you want to do) to the selectNumber function:
// Not sure if you want to pass randonNumber or index but you get the idea
onClick={() => selectNumber(randomNumber)}
<TouchableOpacity onPress={handlePress()}>
should be
<TouchableOpacity onPress={()=>handlePress()}>
and
() => selectNumber
should be
() => selectNumber()
please try it
Might Be This Helpful:
Home.Js
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import RandomNumber from './RandomNumber';
const Home = props => {
const [state, setstate] = useState([]);
useEffect(() => {
console.log('state', state);
}, [state]);
let randomNumber = Array.from({length: 10}).map(
() => 1 + Math.floor(10 * Math.random()),
);
let target = randomNumber
.slice(0, props.randomNumberCount - 2)
.reduce((acc, curr) => acc + curr, 0);
const isNumberSelected = numberIndex => {
return state.indexOf(numberIndex) >= 0;
};
const selectNumber = numberIndex => {
console.log('numberIndex', numberIndex);
setstate(arr => [...arr, numberIndex]);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Target Sum Game</Text>
<Text style={styles.target}>{target}</Text>
<View style={styles.randomContainer}>
{randomNumber.map((randomNumber, index) => {
return (
<RandomNumber
key={index}
id={index}
number={randomNumber}
isSelected={isNumberSelected(index)}
onClick={() => selectNumber(randomNumber)}
/>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ddd',
paddingTop: 30,
},
target: {
fontSize: 30,
backgroundColor: '#aaa',
margin: 50,
marginHorizontal: 70,
textAlign: 'center',
},
header: {
fontSize: 35,
backgroundColor: 'dodgerblue',
textAlign: 'center',
marginHorizontal: 30,
marginTop: 50,
},
randomContainer: {},
});
export default Home;
RandomNumber.js
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default function RandomNumber(props) {
const handlePress = () => {
props.onClick(props.id);
};
return (
<View style={{}}>
<TouchableOpacity onPress={() => handlePress()}>
<Text style={[styles.random, props.isSelected && styles.selected]}>
{props.number}
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
random: {
backgroundColor: '#999',
width: 100,
height: 100,
marginHorizontal: 35,
marginVertical: 25,
fontSize: 35,
textAlign: 'center',
},
selected: {
opacity: 0.3,
},
});
Output Log:

React native `input` must be a function received undefined

I have an array which displays a list of jobs with the radio button(each).If I click any radio button I want to get its value so far I'm getting an error input must be a function received undefined. how can I achieve something like this in react native?
Code
import React, {useState} from 'react';
import {View, Text, TextInput, Image,Button,Body,Pressable,ScrollView,Switch} from 'react-native';
export default function Home({ navigation}){
let roles = navigation.getParam('roles')
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const handleClick = (data, e) => {
alert(e.target.value, data);
}
<View>
{
Object.keys(roles).map((key) => {
return (
<View>
<View style={styles.XYQHC}>
<Text>{roles[key]['name']}</Text>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
<input type="radio" name="roles" value={roles[key]['name']} defaultChecked={roles[key]['id'] == 3 ? true : false } onClick={handleClick.bind(this, roles[key]['name'])}/>
</View>
</View>
)
})
}
</View>
};
I had to edit a little bit to make it work and to assume some input data but here is a working example of your code:
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
function RadioButton({ label, onPress, selected, style }) {
return (
<TouchableOpacity
style={[
{
flexDirection: 'row',
alignItems: 'center',
marginLeft: 12,
marginVertical: 20,
},
style,
]}
onPress={onPress}>
<View
style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
marginRight: 12,
}}>
{selected ? (
<View
style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}}
/>
) : null}
</View>
<Text>{label}</Text>
</TouchableOpacity>
);
}
export default function Home({ navigation }) {
// let status = navigation.getParam('status');
let status = 2;
// let roles = navigation.getParam('roles');
let roles = [
{
id: 1,
name: 'lawyer',
},
{
id: 2,
name: 'farmer',
},
{
id: 3,
name: 'architect',
},
];
const [isEnabled, setIsEnabled] = useState(false);
const [chosenRole, setChosenRole] = useState(false);
useEffect(() => {
roles.find((role) => {
if (role.id === status) {
setChosenRole(role);
return true;
}
return false;
});
}, []);
const handleClick = (data) => {
console.log(data);
setChosenRole(data);
};
return (
<View style={{ marginTop: 30 }}>
{roles.map((role) => {
return (
<View>
<RadioButton
label={role.name}
selected={role.name === chosenRole.name}
onPress={() => handleClick(role)}
/>
</View>
);
})}
</View>
);
}

create variable dynamically in react-native component

i need to create a variable in a react-native component, which i want to use several times...each instance of this component needs to have a different variable name to reference to.
<View ref={view => { shapeView = view; }}
onLayout={({ nativeEvent }) => {
shapeView.measure( (x, y, width, height, pageX, pageY) => {
console.log('- - - DEBUG: width:' + width + ', pageX:'+ pageX + ', pageY:' + pageY);
let shapePickerPosition = {w: width, x: pageX, y: pageY};
setShapeCoords(shapePickerPosition);
})
}}>
as i said, i want to use this code inside a component, and this component several times, and if i don't change die variable: "shapeView" i end up with just the coordinates from the last instance of that component..
here's the whole component:
import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, Modal, TouchableOpacity, Pressable, FlatList} from 'react-native';
import { useTheme} from '#react-navigation/native';
// ------------------PickerRow-----------------------------------------------------------------------
function CustomPickerRow(props) {
const { colors } = useTheme(); // works
const theme = useTheme();
const [selectedItem, setSelectedItem] = useState('choose');
const [coordinates, setCoordinates] = useState();
const setItem = (value) => {
// set parent state
props.action(value)
}
return (
<View
ref = { view => { shapeView = view; } }
onLayout={({ nativeEvent }) => {
shapeView.measure( (x, y, width, height, pageX, pageY) => {
console.log('height:', height);
console.log('width:', width);
console.log('x:', pageX);
console.log('y:', pageY);
let coords = {w: width, x: pageX, y: pageY};
setCoordinates(coords);
})
}}
style = {{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 25,
paddingLeft: 5,
marginBottom: 3,
backgroundColor: colors.frameBackground,
borderColor: colors.borderColor,
borderWidth: 1,
borderRadius: 5}}>
<View style = {styles.icon} >
<Text style = {styles.text}>{props.icon}</Text>
</View>
<View style = {styles.description} >
<Text style = {{fontSize: 11, fontWeight: 'bold', color: colors.text, textAlign: 'left', marginLeft: 5,}}>{props.title}</Text>
</View>
<MyPicker data={props.data} action={setItem} position={coordinates}/>
</View>
);
}
// ------------------MyPicker-----------------------------------------------------------------------
function MyPicker(props) {
const { colors } = useTheme(); // works
const theme = useTheme();
const [isVisible, setIsVisible] = useState(false);
const [selectedItem, setSelectedItem] = useState(props.data[0].key)
const [coordinates, setCoordinates] = useState({w: 180, x: 0, y: 0});
useEffect(() => {
if (props.position) {
setCoordinates(props.position);
}
})
const setItem = item => {
// set parent state
props.action(item.value);
setIsVisible(false);
console.log("chosen value = " + item.key);
setSelectedItem(item.key);
}
const showPicker = () => {
setIsVisible(true);
}
const renderItem = ({item}) => {
return <View>
<Pressable onPress={() => setItem(item)}>
<Text style={{color: colors.text, fontSize: 17, alignSelf: 'center', paddingTop: 3}}>
{item.key}
</Text>
</Pressable>
</View>
}
return (
<View style={{flex:5, backgroundColor: 'transparent'}}>
<TouchableOpacity onPress={showPicker}>
<Text style={{color: colors.textSubtitleColor, fontSize: 11, alignSelf: 'flex-end', paddingRight: 10}}>
{selectedItem}
</Text>
</TouchableOpacity>
<Modal animationType="fade"
transparent={true}
visible={isVisible}
style={styles.testPicker}
onRequestClose={() => {
console.log('Modal has been closed.');
}}
>
<View style={{ backgroundColor: colors.frameBackground,
borderColor: colors.borderColor,
borderWidth: 1,
borderRadius: 5,
position: 'absolute',
width: 180,
height: 200,
left: coordinates.x, //100,
top: coordinates.y //160
}}>
<FlatList
data={props.data}
renderItem={renderItem}
/>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
testPicker: {
backgroundColor: 'gray',
position: 'absolute',
width: 112,
height: 200,
left: 100,
top: 160
},
icon: {
flex: 1,
backgroundColor: '#00529F',
marginRight: 0,
borderRadius: 5
},
description: {
flex: 2,
height: 17,
backgroundColor: 'transparent',
marginRight: 0,
borderRadius: 5
},
});
export default CustomPickerRow;
and i call that component like this:
<CustomPickerRow id='shapePicker' icon='2' title='Shape:' data={shapeItems} action={setShape} selectedItem={selectedShape} visible={modalVisible} />```
shapeView should be a ref like this:
const MyComponent = () => {
const shapeView = useRef();
return (
<View
ref={view => shapeView.current = view}
/* could also look like this: ref={shapeView} */
onLayout={({nativeEvent}) => {
shapeView.current.measure(...);
}
/>
)
}
It SHOULD NOT be like this:
let shapeView; // this is outside your component - it shouldn't be here
const MyComponent = () => {
return (
<View
ref={view => shapeView = view}
onLayout={({nativeEvent}) => {
shapeView.measure(...);
}
/>
)
}
In a class based component it could look like this:
class MyComponent extends React.Component {
constructor() {
this.shapeView = React.createRef();
}
render() {
return (
<View
ref={this.shapeView}
onLayout={({nativeEvent}) => {
this.shapeView.current.measure(...);
}
/>
)
}
}

Categories