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

flatlist (React native) scrolls to top when new item is added to redux store

$
0
0

I have a problem updating the store. When I add an element to it, my flatlist scrolls to the very top, but I wouldn't like that. How can I solve this problem?

my code (book.tsx)

export const NewBook = () => {const dispatch = useDispatch();const datanewBook = useSelector((state:ReduxType) => state.newBook);const updateData = () => dispatch((fetchDataNewBookUpdate(datanewBook.data.next) as any));const DataNewBook = () => {    if(datanewBook.data && !datanewBook.load)        return  <NewBookContainer><FlatList                        refreshing={datanewBook.load}                        keyExtractor={(element) => element.title}                        ListHeaderComponent={<PopularBook/>}                        data={datanewBook.data.results}                        snapToInterval={200}                        renderItem={(book) => NewBookCard(book)}                        onEndReached={updateData}                    /></NewBookContainer>        return  <LoadingComponent/>}return  <DataNewBook/>

}

code that is responsible for the update logic (store.tsx):

export const fetchDataNewBookUpdate = (link: string) => {const book_default = {    load: true,    data: {        count: 0,        next: '',        previous: null,        results:  null    }}return (dispatch:any) => {    console.log(link)    fetch(link)    .then(data => data.json())    .then(json => dispatch(UpdateDataNew({load: false, data: (json as Book)})))    .catch(() => dispatch(UpdateDataNew(book_default)));}

}

the code that is responsible for the update logic of store redux (asyncData.tsx):

    import { Book, ResultsEntity } from '../../interface/interface';const defatult_state:{load:boolean, data: Book} = {    load: true,    data: {        count: 0,        next: '',        previous: null,        results:  null    }}export const newBook = (state = defatult_state, action: {type: string, payload:{load:boolean, data: Book}}) => {    switch (action.type) {        case 'LOAD_DATA_NEW':            return {...state, ...action.payload}        case 'UPDATE_DATA_NEW':            return {load: action.payload.load, data: {count: action.payload.data.count, next: action.payload.data.next, results: [...(state.data.results as ResultsEntity[]), ...(action.payload.data.results as ResultsEntity[])]}}        default:            return state    }}export const LoadDataNew = (payload:{load:boolean, data: Book}) => ({type: 'LOAD_DATA_NEW', payload});export const UpdateDataNew = (payload:{load:boolean, data: Book}) => ({type: 'UPDATE_DATA_NEW', payload});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>