Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

how can i use default props in react.js or react-native?

$
0
0

For example. i have Feeds and Upload Components. also i have ImageFeedList component in Feeds, Upload Components

(Feed.js)

import React, {useContext, useState, useEffect} from 'react';import {StackNavigationProp} from '@react-navigation/stack';import {RandomUserDataContext} from '~/Context/RandomUserData';import ImageFeedList from '~/Components/ImageFeedList';type NavigationProp = StackNavigationProp<FeedsTabParamList, 'Feeds'>;interface Props { navigation: NavigationProp; }   const Feeds = ({navigation}: Props) => {   const {getMyFeed} = useContext(RandomUserDataContext);   const [feedList, setFeedList] = useState<Array<IFeed>>([]);   const [loading, setLoading] = useState<boolean>(false);  useEffect(() => {    setFeedList(getMyFeed(24));  }, []);  return (<ImageFeedList      feedList={feedList}      loading={loading}      onRefresh={() => {      setLoading(true);      setTimeout(() => {      setFeedList(getMyFeed(24));      setLoading(false);      }, 2000);      }}     onEndReached={() => {     setFeedList([...feedList, ...getMyFeed(24)]);      }}     onPress={() => {     navigation.navigate('FeedListOnly');     }}      />     );      };   export default Feeds;

(Upload.js)

 import React, {useContext, useState, useEffect} from 'react'; import {RandomUserDataContext} from '~/Context/RandomUserData'; import ImageFeedList from '~/Components/ImageFeedList';  const Upload = () => {  const {getMyFeed} = useContext(RandomUserDataContext);  const [feedList, setFeedList] = useState<Array<IFeed>>([]);  const [loading, setLoading] = useState<boolean>(false);  useEffect(() => {  setFeedList(getMyFeed(24));  }, []);     return (<ImageFeedList    feedList={feedList}    loading={loading}    onRefresh={() => {    setLoading(true);    setTimeout(() => {    setFeedList(getMyFeed(24));    setLoading(false);    }, 2000);  }}  onEndReached={() => {    setFeedList([...feedList, ...getMyFeed(24)]);  }}  /> ); }; export default Upload;

(ImageFeedList.js)

import React from 'react';import {FlatList,Image,Dimensions,NativeSyntheticEvent,NativeScrollEvent,} from 'react-native';  import styled from 'styled-components/native';  interface Props { id?: number; bounces?: boolean; scrollEnabled?: boolean; feedList: Array<IFeed>; loading?: boolean; onRefresh?: () => void;onEndReached?: () => void;  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void; onPress?: () => void;}const ImageFeedList = ({ id, bounces = true, scrollEnabled = true,feedList,loading,onRefresh,onEndReached,onScroll,onPress,}: Props) => {const width = Dimensions.get('window').width;const imageWidth = width / 3;return (<FlatList  data={feedList}  style={{width}}  keyExtractor={(item, index) => {    return `image-feed-${id}-${index}`;  }}  showsVerticalScrollIndicator={false}  scrollEnabled={scrollEnabled}  bounces={bounces}  numColumns={3}  onRefresh={onRefresh}  onEndReached={onEndReached}  onEndReachedThreshold={0.5}  refreshing={loading}  onScroll={onScroll}  scrollEventThrottle={400}  renderItem={({item, index}) => (<ImageContainer      style={{        paddingLeft: index % 3 === 0 ? 0 : 1,        paddingRight: index % 3 === 2 ? 0 : 1,      }}      onPress={onPress}><Image        source={{uri: item.images[0]}}        style={{width: imageWidth, height: imageWidth}}      /></ImageContainer>  )}/>    );    };   export default ImageFeedList;

what i want to ask is that in Feeds Component i have OnPress and i can pass onPress to ImageFeedList component as Props but there is no onPress props in Upload Component. however error is not gonna happen eventhough there is no onPress in Upload because i have a

interface Props {onPress?: () => void; }

this code i define onPress Props in In ImageFeedList components it meanse if i don't get Props onPress then it's fine

i can use this default props in typeScript

but my question is that how can i use default props in react and react-native other than typeScript??

is there way??


Viewing all articles
Browse latest Browse all 6287

Trending Articles