Why my react-native-shadow-2 is not working ? i have installed npm i react-native-shadow-2 and react-native-svg but still its not working tell how to fix it i have also restarted my project i am using android i have also tried to do npx react-native link but that also did not work you can see whats the problem the shadow i have marked is wrong it should be like this
How its showing currently
my code
import React, { useRef } from 'react'
import {
View,
Text,
Image,
Animated,
FlatList,
} from 'react-native';
import {
Home,
Profile,
Search
} from '../../screens';
import { COLORS, FONTS, SIZES, constants } from '../../constants';
import { Shadow } from 'react-native-shadow-2';
const bottom_tabs = constants.bottom_tabs.map((bottom_tabs) => ({
...bottom_tabs,
ref: React.createRef()
}))
const MainLayout = () => {
const flatListRef = React.useRef()
const scrollX = React.useRef(new Animated.Value(0)).current;
function renderContent() {
return (
<View style={{
flex: 1,
}}
>
<Animated.FlatList
ref={flatListRef}
horizontal
pagingEnabled
snapToAlignment="center"
snapToInterval={SIZES.width}
decelerationRate="fast"
showsHorizontalScrollIndicator={false}
data={constants.bottom_tabs}
keyExtractor={item => `Main-${item.id}`}
onScroll={
Animated.event([
{ nativeEvent: { contentOffset: { x: scrollX } } }
], {
useNativeDriver: false
})
}
renderItem={({ item, index }) => {
return (
<View
style={{
height: SIZES.height,
width: SIZES.width
}}
>
{item.label == constants.screens.home && <Home />}
{item.label == constants.screens.search && <Search />}
{item.label == constants.screens.profile && <Profile />}
</View>
)
}}
/>
</View>
)
}
function renderBottonTab() {
return (
<View
style={{
marginBottom: 20,
paddingHorizontal: SIZES.padding,
paddingVertical: SIZES.radius
}}
>
<Shadow size={[SIZES.width - (SIZES.padding * 2), 85]}>
<View
style={{
flex: 1,
borderRadius: SIZES.radius,
backgroundColor: COLORS.primary3
}}
>
</View>
</Shadow>
</View>
)
}
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.white,
}}
>
{/* Content */}
{renderContent()}
{/* Bottom Tab */}
{renderBottonTab()}
</View>
)
}
export default MainLayout;
Related
I am new to React native. I am trying draggable Flatlist with Swipeable item which is not working. But when i tried with example it's working but not with real code.
https://snack.expo.dev/#computerjazz/swipeable-draggable-list -- Working
//Here is my first component
This is my first component where i have added only draggable flatlist.But when i tried with example it's working but not with real code.
//Correct Draggable list
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View, CheckBox} from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
import LABEL from '../common/ContentTranslations';
import RowComponent from './RowComponent';
function DashboardSortableListComponent(props) {
const [data, setData] = useState(props.data);
const disableText = props.appLanguage
? LABEL[props.appLanguage].LABEL_DISABLE
: '';
const data_order = props.data;
const order = Object.keys(data_order);
const renderItem = ({item, index, drag, isActive}) => (
<View style={styles.item}>
<TouchableOpacity onLongPress={drag}>
<RowComponent
key={item.pid}
rowData={item}
index={index}
totalRows={item.length}
navigate={props.navigate}
appLanguage={props.appLanguage}
disableText={disableText}
removeCurrencyPairFromList={props.removeCurrencyPairFromList}
/>
</TouchableOpacity>
</View>
);
return (
<View style={styles.screen}>
<View style={{flex: 1}}>
<DraggableFlatList
data={data}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
onDragEnd={({data}) => setData(data)}
updateOrder={props.onUpdateOrder}
order={order}
disableText={disableText}
navigate={props.navigate}
appLanguage={props.appLanguage}
refreshCurrencyPairsList={props.refreshCurrencyPairsList}
removeCurrencyPairFromList={props.removeCurrencyPairFromList}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
//marginTop: 24,
flex: 1,
//backgroundColor: '#212121',
},
item: {
// flexDirection: 'row',
// justifyContent: 'space-between',
},
});
export default DashboardSortableListComponent;
//Here is my second component where i have added Swipeable list in another component.
import React from 'react';
import Swipeout from 'react-native-swipeout';
import {Text, View, Animated, TouchableOpacity} from 'react-native';
import {TouchableHighlight} from 'react-native-gesture-handler';
import HTMLText from 'react-native-html-to-text';
import {Helper} from '../common/helpers/Helper';
import Icon from 'react-native-vector-icons/Ionicons';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import SwipeableItem, {
useSwipeableItemParams,
} from 'react-native-swipeable-item';
import DraggableFlatList, {
ScaleDecorator,
} from 'react-native-draggable-flatlist';
let createReactClass = require('create-react-class');
let styles = require('../assets/stylesheet/stylesheet');
const RowComponent = createReactClass({
render: function () {
let swipeoutBtns = [
{
text: this.props.disableText,
backgroundColor: '#dfb665', //ff3333
underlayColor: '#555d66',
color: '#000000',
onPress: () => {
this.props.removeCurrencyPairFromList(this.props.rowData);
},
},
,
];
const UnderlayRight = ({removeCurrencyPairFromList}) => (
<Animated.Text
style={{
backgroundColor: '#dfb665',
underlayColor: '#555d66',
color: '#000000',
flex: 1,
}}>
<TouchableOpacity
onPress={() =>
this.props.removeCurrencyPairFromList(this.props.rowData)
}>
<Text>{this.props.disableText}</Text>
</TouchableOpacity>
</Animated.Text>
);
return (
<View
style={
this.props.index === this.props.totalRows - 1
? styles.cpLastRowStyle
: styles.cpNormalRowStyle
}>
<ScaleDecorator>
{/* <SwipeableItem
key={this.props.rowData.pid}
item={this.props.rowData}
overSwipe={50}
//swipeDamping={5}
renderUnderlayRight={() => (
<UnderlayRight
removeCurrencyPairFromList={
this.props.removeCurrencyPairFromList
}
/>
)}
snapPointsRight={[150]}> */}
<Swipeout
left={swipeoutBtns}
style={{backgroundColor: '#414a53'}}
autoClose={true}
buttonWidth={100}
sensitivity={10}>
<View>
{Helper.isChartsAvailable(
this.props.rowData.currencyPair,
this.props.rowData.graphCurrencyPair,
) ? (
<TouchableHighlight
underlayColor={'#000000'}
delayLongPress={50}
style={{backgroundColor: '#333e48'}}
{...this.props.sortHandlers}
onPress={() =>
this.props.navigate('Charts', {
currencyPair: this.props.rowData.graphCurrencyPair,
bid: this.props.rowData.bid,
offer: this.props.rowData.offer,
graphCurrencyPair: this.props.rowData.graphCurrencyPair,
productName: Helper.selectProductNameBaseOnLang(
this.props.appLanguage,
this.props.rowData,
),
})
}>
<View style={[styles.rowstyle]}>
<HTMLText
style={[
styles.width100,
styles.customFont,
styles.textGold,
]}
html={Helper.selectProductNameBaseOnLang(
this.props.appLanguage,
this.props.rowData,
)}
/>
<Text style={[styles.width60, styles.customFont]}>
{Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
) != -1
? this.props.rowData.bid.toFixed(
Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
),
)
: this.props.rowData.bid}
</Text>
<Text style={[styles.width60, styles.customFont]}>
{Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
) != -1
? this.props.rowData.offer.toFixed(
Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
),
)
: this.props.rowData.offer}
</Text>
<Icon
name="ios-stats-chart"
style={[styles.gridiconstyle, styles.width30]}
/>
</View>
</TouchableHighlight>
) : (
<TouchableHighlight
underlayColor={'#000000'}
style={{backgroundColor: '#333e48'}}
delayLongPress={50}
{...this.props.sortHandlers}>
<View style={[styles.rowstyle]}>
<HTMLText
style={[
styles.width100,
styles.customFont,
styles.textGold,
]}
html={Helper.selectProductNameBaseOnLang(
this.props.appLanguage,
this.props.rowData,
)}
/>
<Text style={[styles.width60, styles.customFont]}>
{Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
) != -1
? this.props.rowData.bid.toFixed(
Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
),
)
: this.props.rowData.bid}
</Text>
<Text style={[styles.width60, styles.customFont]}>
{Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
) != -1
? this.props.rowData.offer.toFixed(
Helper.getDecimalPointsForCurrencyPairs(
this.props.rowData.currencyPair,
),
)
: this.props.rowData.offer}
</Text>
<Icon
name="ios-stats-chart"
style={[
styles.gridiconstyle,
styles.width30,
styles.desabled,
]}
/>
</View>
</TouchableHighlight>
)}
</View>
{/* </SwipeableItem> */}
</Swipeout>
</ScaleDecorator>
</View>
);
},
});
module.exports = RowComponent;
I'm newbie in React-native and I'm confused on how can I pass the parameter to another js file when returning a View, The second problem , The code I used below is when returning home the previous page(login) didn't close or gone and the home didn't view properly. I'm aware using react-nativigation but it's hard for me to implement but is there any other way to direct login when it loads? please need some help for this , here's my code,
Login.js After login from googlesignin when the state loaded it goes to another activity
import { Home } from "../screens"
render() {
return (
<View style={styles.container}>
<GoogleSigninButton
style={{ width: 222, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this.signIn}
/>
{this.state.loaded ?
<View style={{ width: 160, marginTop: 10 }}>
{renderLogin(this)} //return some value
</View>
: <Text>Not signIn</Text>}
</View>
);
}
}
function renderLogin(ts) {
return (
<Home /> // i want to pass value to home js example: 'ts.state.userGoogleInfo.user.photo'
)
}
Whole code in Login.js
import React, { Component } from 'react';
import { View, StyleSheet, ToastAndroid, Button, Text, Image } from "react-native";
import { Home } from "../screens"
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from '#react-native-community/google-signin';
GoogleSignin.configure({
webClientId: '2622122222248-3v21124124124124.apps.googleusercontent.com',
offlineAccess: true, // if you want to access Google API on behalf
});
class Login extends Component {
constructor(props) {
super(props)
this.state = {
userGoogleInfo: {},
loaded: false
}
}
static navigationOptions = {
title: 'Login',
};
signIn = async () => {
try {
console.log("Processing");
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
this.setState({
userGoogleInfo: userInfo,
loaded: true
})
console.log(this.state.userGoogleInfo);
console.log(this.state.userGoogleInfo.user.name)
console.log(this.state.userGoogleInfo.user.email)
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log("e 1");
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log("e 2");
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log("e 3");
} else {
console.log(error.message);
}
}
};
render() {
return (
<View style={styles.container}>
<GoogleSigninButton
style={{ width: 222, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this.signIn}
/>
{this.state.loaded ?
<View style={{ width: 160, marginTop: 10 }}>
{renderLogin(this)}
</View>
: <Text>Not signIn</Text>}
</View>
);
}
}
function renderLogin(ts) {
return (
<Home />
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
padding: 15,
},
buttons: {
width: 20
}
});
export default Login;
Home.js
import React from 'react';
import {
StyleSheet,
View,
Text,
ScrollView,
FlatList,
TouchableOpacity,
Image,
ImageBackground,
LogBox
} from 'react-native';
import { PriceAlert, TransactionHistory } from "../components"
import { dummyData, COLORS, SIZES, FONTS, icons, images} from '../constants';
const Home = ({ navigation }) => {
const [trending, setTrending] = React.useState(dummyData.trendingCurrencies)
const [transactionHistory, setTransactionHistory] = React.useState(dummyData.transactionHistory)
function renderHeader(){
const renderItem = ({item, index}) =>(
<TouchableOpacity
style={{
width:155,
paddingVertical:SIZES.padding,
paddingHorizontal:SIZES.padding,
marginLeft: index == 0 ? SIZES.padding : 0,
marginRight: SIZES.radius,
borderRadius: 15,
backgroundColor: COLORS.white
}}
onPress={() => navigation.navigate("CryptoDetail", {currency:item})}
>
{/* Currency*/}
<View style={{ flexDirection:'row'}}>
<View>
<Image
source={item.image}
resizeMode="cover"
style={{
marginTop: 5,
width: 25,
height: 25
}}
/>
</View>
<View style={{marginLeft: SIZES.base}}>
<Text style={{...FONTS.h3}}>{item.currency}</Text>
<Text style={{ color:COLORS.gray, ...FONTS.body3 }}></Text>
</View>
</View>
{/* value*/}
{/* <View style={{ marginTop:SIZES.radius}}> */}
{/* <Text style={{...FONTS.h6}}>₱{item.amount}</Text> */}
{/* <Text style={{color: item.type =="I" ? COLORS.green : COLORS.red, ...FONTS.h5}}>₱{item.amount}</Text> */}
{/* </View> */}
</TouchableOpacity>
)
return(
<View
style={{
width: "100%",
height: 210,
...styles.shadow
}}
>
<ImageBackground
source={images.banner}
resizeMode="cover"
style={{
flex: 1,
alignItems:'center'
}}
>
{/* Header Bar */}
<View
style={{
marginTop:SIZES.padding *1,
width: "100%",
alignItems: "flex-end",
paddingHorizontal: SIZES.padding
}}
>
<TouchableOpacity
style={{
width: 20,
height: 20,
alignItems: "center",
justifyContent:"center"
}}
onPress={() => console.log("Notification on pressed")}
>
<Image
source={icons.notification_white}
resizeMode="contain"
style={{flex: 1}}
/>
</TouchableOpacity>
</View>
{/* Balance */}
<View
style={{
alignItems: 'center',
justifyContent:'center'
}}
>
<Text style={{ color: COLORS.white, ...FONTS.h3}}>Available Balance</Text>
<Text style={{ marginTop:SIZES.base, color:COLORS.white, ...FONTS.h2}}>₱{dummyData.portfolio.balance}</Text>
<Text style={{color:COLORS.white, ...FONTS.body5}}>{dummyData.portfolio.changes} Last 24 hours</Text>
</View>
{/* Trending */}
<View
style={{
position:'absolute',
bottom: "-30%"
}}
>
<Text style={{ marginLeft:SIZES.padding,
color: COLORS.white, ...FONTS.h3 }}>Dashboard</Text>
<FlatList
contentContainerStyle={{marginTop:SIZES.base}}
data={trending}
renderItem={renderItem}
keyExtractor={item => `${item.id}`}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
</ImageBackground>
</View>
)
}
function renderAlert(){
return (
<PriceAlert/>
)
}
function renderNotice(){
return (
<View
style={{
marginTop:SIZES.padding-6,
marginHorizontal: SIZES.padding,
padding: 12,
borderRadius:SIZES.radius,
backgroundColor:COLORS.secondary,
...styles.shadow
}}
>
<Text style={{color:COLORS.white, ...FONTS.h4}}>Announcement:</Text>
<Text style={{marginTop:SIZES.base, color:COLORS.white, ...FONTS.body4, lineHeight:18}}>We offer you an application to guide and track your data.
Learn how to use this application by reading instructions and guide.
</Text>
<TouchableOpacity
style={{
marginTop:SIZES.base
}}
onPress={()=> console.log("Learn More")}
>
<Text style={{ textDecorationLine: 'underline',
color:COLORS.green, ...FONTS.h4}}>Learn more
</Text>
</TouchableOpacity>
</View>
)
}
function renderTransactionHistory(){
return (
<TransactionHistory
customContainerStyle={{ ...styles.shadow}}
history={transactionHistory}
/>
)
}
return (
<ScrollView>
<View style={{ flex:1, paddingBottom:130 }}>
{renderHeader()}
{renderAlert()}
{renderNotice()}
{renderTransactionHistory()}
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
shadow: {
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
}
})
export default Home;
Apps.js
import React from 'react';
import { Transaction, TevDetail, Login } from "./screens";
import { createStackNavigator } from "#react-navigation/stack";
import { NavigationContainer } from '#react-navigation/native';
import SplashScreen from 'react-native-splash-screen';
import Tabs from "./navigation/tabs";
const Stack = createStackNavigator();
const App = () => {
React.useEffect(() => {
SplashScreen.hide()
}, [])
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={'Login'}
>
<Stack.Screen
name="Home"
component={Tabs}
/>
<Stack.Screen
name="TevDetail"
component={TevDetail}
/>
<Stack.Screen
name="Transaction"
component={Transaction}
/>
<Stack.Screen
name="Login"
component={Login}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;
Here, I am fetching data from firebase and then trying to output it in a tinder card like format. My code is as follows -
import React from 'react';
import { View, ImageBackground, Text, Image, TouchableOpacity } from 'react-native';
import CardStack, { Card } from 'react-native-card-stack-swiper';
import City from '../components/City';
import Filters from '../components/Filters';
import CardItem from '../components/CardItem';
import styles from '../assets/styles';
import Demo from '../assets/demo';;
import {db} from '../config/config';
class Home extends React.Component {
constructor (props) {
super(props);
this.state = ({
items: [],
isReady: false,
});
}
componentWillMount() {
let items = [];
db.ref('cards').once('value', (snap) => {
snap.forEach((child) => {
let item = child.val();
item.id = child.key;
items.push({
name: child.val().pet_name,
description: child.val().pet_gender,
pet_age: child.val().pet_age,
pet_breed: child.val().pet_breed,
photoUrl: child.val().photoUrl,
});
});
//console.log(items)
this.setState({ items: items, isReady: true });
console.log(items);
});
}
componentWillUnmount() {
// fix Warning: Can't perform a React state update on an unmounted component
this.setState = (state,callback)=>{
return;
};
}
render() {
return (
<ImageBackground
source={require('../assets/images/bg.png')}
style={styles.bg}
>
<View style={styles.containerHome}>
<View style={styles.top}>
<City />
<Filters />
</View>
<CardStack
loop={true}
verticalSwipe={false}
renderNoMoreCards={() => null}
ref={swiper => {
this.swiper = swiper
}}
>
{this.state.items.map((item, index) => (
<Card key={index}>
<CardItem
//image={item.image}
name={item.name}
description={item.description}
actions
onPressLeft={() => this.swiper.swipeLeft()}
onPressRight={() => this.swiper.swipeRight()}
/>
</Card>
))}
</CardStack>
</View>
</ImageBackground>
);
}
}
export default Home;
I am fetching data and storing it in an array called items[]. Console.log(items) gives me the following result:
Array [
Object {
"description": "male",
"name": "dawn",
"pet_age": "11",
"pet_breed": "golden retriever",
"photoUrl": "picture",
},
Object {
"description": "Male",
"name": "Rambo",
"pet_age": "7",
"pet_breed": "German",
"photoUrl": "https://firebasestorage.googleapis.com/v0/b/woofmatix-50f11.appspot.com/o/pFkdnwKltNVAhC6IQMeSapN0dOp2?alt=media&token=36087dae-f50d-4f1d-9bf6-572fdaac8481",
},
]
Furthermore, I want to output my data in a card like outlook so I made a custom component called CardItem:
import React from 'react';
import styles from '../assets/styles';
import { Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
import Icon from './Icon';
const CardItem = ({
actions,
description,
image,
matches,
name,
pet_name,
pet_gender,
pet_age,
onPressLeft,
onPressRight,
status,
variant
}) => {
// Custom styling
const fullWidth = Dimensions.get('window').width;
const imageStyle = [
{
borderRadius: 8,
width: variant ? fullWidth / 2 - 30 : fullWidth - 80,
height: variant ? 170 : 350,
margin: variant ? 0 : 20
}
];
const nameStyle = [
{
paddingTop: variant ? 10 : 15,
paddingBottom: variant ? 5 : 7,
color: '#363636',
fontSize: variant ? 15 : 30
}
];
return (
<View style={styles.containerCardItem}>
{/* IMAGE */}
<Image source={image} style={imageStyle} />
{/* MATCHES */}
{matches && (
<View style={styles.matchesCardItem}>
<Text style={styles.matchesTextCardItem}>
<Icon name="heart" /> {matches}% Match!
</Text>
</View>
)}
{/* NAME */}
<Text style={nameStyle}>{name}</Text>
{/* DESCRIPTION */}
{description && (
<Text style={styles.descriptionCardItem}>{description}</Text>
)}
{/* STATUS */}
{status && (
<View style={styles.status}>
<View style={status === 'Online' ? styles.online : styles.offline} />
<Text style={styles.statusText}>{pet_age}</Text>
</View>
)}
{/* ACTIONS */}
{actions && (
<View style={styles.actionsCardItem}>
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.red]} onPress={() => {
this.swiper.swipeLeft();
}}>
<Image source={require('../assets/red.png')} resizeMode={'contain'} style={{ height: 62, width: 62 }} />
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.orange]} onPress={() => {
this.swiper.goBackFromLeft();
}}>
<Image source={require('../assets/back.png')} resizeMode={'contain'} style={{ height: 32, width: 32, borderRadius: 5 }} />
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.green]} onPress={() => {
this.swiper.swipeRight();
}}>
<Image source={require('../assets/green.png')} resizeMode={'contain'} style={{ height: 62, width: 62 }} />
</TouchableOpacity>
</View>
</View>
)}
</View>
);
};
export default CardItem;
The problem is when I try to pass the data in my items[] array, the cardItem component just doesnt work. To dry-run, I used a sample demo array and when I use the Demo array, my component works just fine. What am I doing wrong? I have been tinkering with this problem for quite a while now. Any help whatsoever would be appreciated.
I'm making a search bar that displays results live. I've managed to do it properly utilizing SearchBar from 'react-native-elements'. Firstly I had it written as a class component, but decided to rewrite it as a functional component. After rewriting it I'm encountering a bug where the keyboard closes after one letter as seen in the video here
Here is the code of the component
import React, { Component, useEffect, useState } from "react";
import { View, Text, FlatList, TextInput, ListItem } from "react-native";
import { SearchBar } from "react-native-elements";
import { Button } from 'react-native-paper'
import Header from "../navigation/Header";
export default function AktSelect() {
const [data, setData] = useState([])
const [value, setValue] = useState('')
const [akt, setAkt] = useState([])
useEffect(() => {
fetch("http://192.168.5.12:5000/aktprikaz", {
method: "get"
})
.then(res => res.json())
.then(res => setAkt(res));
}, []);
function renderSeparator() {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE"
}}
/>
);
}
function searchItems(text) {
const newData = akt.filter(item => {
const itemData = `${item.title.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setData(newData)
setValue(text)
}
function renderHeader() {
return (
<SearchBar
placeholder=" Type Here...Key word"
onChangeText={text => searchItems(text)}
value={value}
lightTheme={true}
/>
);
}
return (
<View
style={{
flex: 1,
width: "98%",
alignSelf: "center",
justifyContent: "center"
}}
>
<Header title='Pretraživanje aktivnosti' />
<FlatList
data={data}
renderItem={({ item }) => (
<View style={{flex: 1}}>
<Text style={{ padding: 10 }}>{item.title} </Text>
<View style={{flexDirection:'row'}}>
<Text style={{ padding: 10 }}>{item.start_time} </Text>
<Button style={{justifyContent: 'flex-end', alignContent: 'flex-end', width:'30%'}} mode='contained' onPress={() => console.log('hi')}>hi</Button>
</View>
</View>
)}
keyExtractor={item => item.id.toString()}
ItemSeparatorComponent={renderSeparator}
ListHeaderComponent={renderHeader}
/>
</View>
);
}
The old class component can be found here
the following code works fine on iOS, but on android after loading the orders array and rendering it, the onpress event stops working, at first I thought it was a problem with firebase but then I did it locally and I get the same issue.
import React from 'react';
import {
ActivityIndicator,
Alert,
Button,
Dimensions,
Image,
StatusBar,
StyleSheet,
ScrollView,
Text,
TouchableOpacity,
View,
Platform,
RefreshControl,
YellowBox } from 'react-native';
import { Ionicons as Icon } from '#expo/vector-icons';
import { Card, DefaultTheme } from 'react-native-paper';
import NavigationService from '../../Navigation/navigationService';
import _ from 'lodash';
YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
if (message.indexOf('Setting a timer') <= -1) {
_console.warn(message);
}
};
import Firebase from '../../connection/to-firebase';
const LOGO_URL = 'https://i.imgur.com/BbYaucd.png';
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
paddingTop: StatusBar.currentHeight,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT / 2,
backgroundColor: "#317AFA",
},
innerContainer: {width:SCREEN_WIDTH, alignItems: 'center', justifyContent: 'center' },
header: {position:'absolute', padding: 15, paddingTop: Platform.OS === 'ios' ? 13 : 7, marginTop:SCREEN_HEIGHT*0.05,zIndex:99 },
scrollView: {
position:'absolute',
top:SCREEN_HEIGHT*0.35,
marginHorizontal: 20,
width: SCREEN_WIDTH*0.90,
height: SCREEN_HEIGHT,
zIndex:9999
},
textHeader:{
marginTop:10,
color: 'white',
fontWeight: 'bold',
fontSize: 40,
}
});
const theme = {
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
}
}
export default class DefaultScreen extends React.Component {
constructor (props) {
super(props)
console.ignoredYellowBox = [
'Setting a timer'
];
this.state = {
orders: [],
refreshing: false,
timePassed: false
}
}
_onRefresh = () => {
this.setState({refreshing: true});
this.getOrders().then(() => {
this.setState({refreshing: false});
});
//setTimeout(()=>{this.setState({refreshing: false})},1000)
}
async getOrders(){
//let result = await Firebase.extractOrder();
let result = [
{
"Note": "",
"coords": {
"finalLatitude": 14.100751767597542,
"finalLongitude": -87.18541710839844,
"initialLatitude": 14.061113522979957,
"initialLongitude": -87.21807641015624
},
"createdAt": {
"nanoseconds": 686000000,
"seconds": 1576188983
},
"destinataryName": "Eliana Martínez",
"destinataryPhone": "97412032",
"idSubcategory": "1",
"idUsuario": 1,
"isTakenBySomeone": false,
"orderID": "rQAt5IEI687AkoI8rShh",
"products": [
{
"id": 93634,
"observation": "",
"price": "56.00",
"quantity": 1
},
{
"id": 29909,
"observation": "",
"price": "131.00",
"quantity": 97
}
],
"status": "Pending",
"telephone": 23456987,
"transportType": "Motocicleta"
}
]
this.setState({ orders: result});
}
componentDidMount(){
//this.getOrders();
}
renderOrders = (orders) =>{
return orders.map((a,b)=>{
return [
<MainOrders key={a.orderID} dName= {a.orderID} note ={a.Note} transType={a.transportType} orderDetails={a}
navigation={this.props.navigation}
/>
]
})
}
render() {
setTimeout(()=>{this.setState({timePassed: true})}, 1000);
if (!this.state.timePassed){
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}
style = {{marginTop:'10%'}}
>
<Icon name="md-menu" size={35} color={'#fff'}/>
</TouchableOpacity>
<Text style={styles.textHeader}>Home</Text>
</View>
<View style={styles.innerContainer}>
<ScrollView style={styles.scrollView}
refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh}/>}
>
<Card theme={theme}>
<Card.Title title="Order List" subtitle="" />
<Card.Content>
<ActivityIndicator size="small" color="#317AFA" />
</Card.Content>
<Card.Actions>
<Button title="View Order" style={{zIndex:9999, elevation:15}} onPress={()=>{
Alert.alert('Hello World')
}}>View Order</Button>
</Card.Actions>
</Card>
</ScrollView>
</View>
</View>
);
}
else{
const {orders,navigation} = this.state;
DefaultScreen.navigationOptions = {
title: ''
}
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}
style = {{marginTop:'10%'}}
>
<Icon name="md-menu" size={35} color={'#fff'}/>
</TouchableOpacity>
<Text style={styles.textHeader}>Home</Text>
</View>
<View style={styles.innerContainer}>
<ScrollView style={styles.scrollView}
refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh}/>}
>
<Card theme={theme}
>
<Card.Title title="Order List" subtitle="" />
<Card.Content>
{
orders.map((a,b)=>{
return [
<MainOrders key={a.orderID} dName= {a.orderID} note ={a.Note} transType={a.transportType} orderDetails={a}
navigation={this.props.navigation}
/>
]
})
}
</Card.Content>
<Card.Actions>
<Button title="Press me" style={{zIndex:9999}} onPress={()=>{
Alert.alert('Hello World')
}}> Press me</Button>
</Card.Actions>
</Card>
</ScrollView>
</View>
</View>
);
}
}
}
class MainOrders extends React.Component {
constructor() {
super();
}
render() {
return (
<View style={{marginTop:2,marginBottom:2}}>
<Card theme={theme}>
<Card.Title title={this.props.dName} subtitle={this.props.note} />
<Card.Content>
<Text>{this.props.transType}</Text>
</Card.Content>
<Card.Actions>
<Button title="view order" style={{zIndex:9999}} onPress={()=>{
this.props.navigation.navigate('orderDetails',{orderDetails: this.props.orderDetails})
}}> view order</Button>
</Card.Actions>
</Card>
</View>
);
}
}
I tried changing the execution orders,
setting timeout and when I manually filled out the order array was that I realized that the problem is at that point, but I can't see what I'm doing wrong.
"react-native": "0.59.8"
Thanks.