CODEWITHSUNDEEP
react-nativereact-hooksreact-native-flatlist
user13637551
user13637551

Reputation: 13

React Native inputText with Flatlist

I'm new to react-native. This component below should render comments posted by users, I would like to add an inputText component from react-native to allow users to post a comment, but don't know where I should place it within the code below.

import React, { useState, useEffect } from 'react';
import { useNavigation } from "@react-navigation/native";
import Icon from 'react-native-vector-icons/AntDesign';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  FlatList,
  Button,
  TextInput
} from 'react-native';
import parseDate from "../utils/parseDate";
import * as API from "../api/api"

export default function CommentList({ ride }) {
  const [text, setText] = React.useState("");
  const [commentsData, setComments] = useState([]);
  const navigation = useNavigation();

  useEffect(() => {
    API.getCommentsByRideId(ride.ride_id).then((comments) => {
      setComments(comments)
    })
  }, [ride.ride_id])


  deleteComment = (comment_id) => {
    // useEffect(() => {
    API.deleteCommentsByCommentId(comment_id).then(() => {
      const updatedComments = list.filter((item) => item.comment_id !== comment_id);
      setComments(updatedComments)
    })
    // }, [comment_id])
  }
  //deletes on refresh only 


  addComment = (newComment, ride_id) => {
    API.postCommentByRideId(newComment, ride_id).then(() => {
      setComments(newComment)
    })
  }

  return (
    <FlatList
      style={styles.root}
      data={commentsData}
      ItemSeparatorComponent={() => {
        return (
          <View style={styles.separator} />
        )
      }}
      keyExtractor={(item) => {
        return item.author;
      }}
      renderItem={(item) => {
        const comment = item.item;
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={() => navigation.navigate("UserProfile", { username: item.author })}>
              {/* <Image style={styles.image} source={{ uri: comment.avatar_url }} /> */}
            </TouchableOpacity>
            <View style={styles.content}>
              <View style={styles.contentHeader}>
                <Text style={styles.name}>{comment.author}</Text>
                <Text style={styles.time}>
                  {parseDate(comment.created_at)}
                  {comment.votes}
                </Text>
              </View>
              <Text rkType='primary3 mediumLine'>{comment.body}</Text>
              {/* <Text style={styles.time}> Likes: {comment.votes}</Text> */}
              <TouchableOpacity onPress={() => deleteComment(comment.comment_id)}>
                <Icon name="delete" size={20} color="#e33057" />
              </TouchableOpacity>
            </View>
          </View>
        );
      }} />
  );
}

This is the inputText I would like to add to allow users to post a comment.

    <TextInput
              value={text}
              placeholder="write..."
              onChangeText={text => setText(text)}
              onSubmitEditing={() => addcomment(text, ride.ride_id)}
            />

Upvotes: 0

Views: 446

Answers (1)

Ahmed Gaber
Ahmed Gaber

Reputation: 3976

if you want to add it at fixed position in bottom of screen you may do this

<View style={{flex : 1}}>
  <Flatlist
    contentContainerStyle={{paddingBottom: 50}}
    .../>
  <View style={{position : 'absolute', bottom : 0, width : '100%', height : 50}}>
    //you input here
  </View>
</View>

or if you want to add it last item of flatlist you may use ListFooterComponent

<FlatList
  ListFooterComponent={<Input/>}
  .../>
</FlatList>

Upvotes: 1

Related Questions