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

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??

13 thoughts on “how can i use default props in react.js or react-native?”

Leave a Comment