im trying to achieve message view by using card with flatlist how can i arrange few elements of my flat list the left screen right screen.
I want the green card to be on the left side of the screen
You can use react-native-gifted-chat for your desired result.
npm install react-native-gifted-chat --save
import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
export function Example() {
const [messages, setMessages] = useState([]);
useEffect(() => {
setMessages([
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
},
},
])
}, [])
const onSend = useCallback((messages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
}, [])
return (
<GiftedChat
messages={messages}
onSend={messages => onSend(messages)}
user={{
_id: 1,
}}
/>
)
}
Related
Does anybody have a working example of a react-native multi-select with formik? I already tried
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
but the value array doesn't get submitted, but instead get an empty array.
Thank you.
there you have, hope you're reading the docs for both libraries. I'm doing that and it was just joining the code. it should work.
// Formik x React Native example
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik';
import Icon from 'react-native-vector-icons/MaterialIcons';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
const items = [
{
name: 'Fruits',
id: 0,
// these are the children or 'sub items'
children: [
{ name: 'Apple', id: 10 },
{ name: 'Strawberry', id: 17 },
],
},
];
export const MyReactNativeForm = props => (
<Formik
initialValues={{ items: [] }}
onSubmit={values => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<SectionedMultiSelect
items={items}
IconRenderer={Icon}
uniqueKey="id"
subKey="children"
selectText="Choose some things..."
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={handleChange('items')}
selectedItems={values.items}
/>
<Button onPress={handleSubmit} title="Submit" />
</View>
)}
</Formik>
);
this is the example
import React, { Component } from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
const items = [
// this is the parent or 'item'
{
name: 'Fruits',
id: 0,
// these are the children or 'sub items'
children: [
{
name: 'Apple',
id: 10,
},
{
name: 'Strawberry',
id: 17,
},
{
name: 'Pineapple',
id: 13,
},
{
name: 'Banana',
id: 14,
},
{
name: 'Watermelon',
id: 15,
},
{
name: 'Kiwi fruit',
id: 16,
},
],
},
{
// next parent item
...
},
];
export default class App extends Component {
constructor() {
super();
this.state = {
selectedItems: [],
};
}
onSelectedItemsChange = (selectedItems) => {
this.setState({ selectedItems });
};
render() {
return (
<View>
<SectionedMultiSelect
items={items}
IconRenderer={Icon}
uniqueKey="id"
subKey="children"
selectText="Choose some things..."
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={this.state.selectedItems}
/>
</View>
);
}
}
I need a hand to correct my code. I want to display a page with 3 tabs with react-native-tab-view and I don't know why I have an error. could you help me find where it's stuck?
What may seem obvious and easy to you may not be easy for me, so please be indulgent :) Thank you very much for your help and your time.
import * as React from 'react';
import { Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Information from '../Information';
import Photos from '../Photos';
import Stock from '../Stock';
import { getProducts } from '../../../../src/common/Preferences';
import styles from '../../../../assets/styles';
import i18n from '../../../../src/i18n';
const FirstRoute = () => (
<Information style={styles.scene} />
);
const SecondRoute = () => (
<Stock style={styles.scene} />
);
const ThirdRoute = () => (
<Photos style={styles.scene} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default class ProductDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
// productId: (props.navigation.state.params && props.navigation.state.params.productId ? props.navigation.state.params.productId : -1),
index: 0,
routes: [{ key: '1', title: i18n.t("information.title"),icon: 'ios-paper', }, {icon: 'ios-paper', key: '2', title: i18n.t("stock.title") }, {icon: 'ios-paper', key: '3', title: i18n.t("photos.title") }],
};
}
_handleIndexChange = index => {
this.setState({index})
};
_renderScene = SceneMap({
'1': FirstRoute,
'2': SecondRoute,
'3': ThirdRoute,
});
render() {
return (
<TabView
navigationState={this.state}
renderScene={this._renderScene}
initialLayout={initialLayout}
onRequestChangeTab={this._handleIndexChange}
useNativeDriver
/>
);
};
}
I get :
TypeError: _this.props.onIndexChange is not a function. (In
'_this.props.onIndexChange(index)', '_this.props.onIndexChange' is
undefined)
Code updated but still has the issue
I am trying to implement React Context API in a React native App, i have my array of data in the useEffect console.log but the .map not showing anything on screen/not rendering any error either. I'm out of idea to solve this problem so i come here for help.
this is my app.js file where i create the context
import React, {useState} from 'react';
import { StyleSheet } from 'react-native';
import Page1 from './Page1';
export const BurgerContext = React.createContext()
export default function App() {
const [burgerDataBase,setBurgerDataBase] = useState([
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
])
return (
<BurgerContext.Provider value={{burgerDataBase, setBurgerDataBase}}>
<Page1/>
</BurgerContext.Provider>
);
}
this is my page1 screen where i want to get the data form context and map on them
import React, {useState, useEffect, useContext} from 'react'
import {BurgerContext} from './App'
import { Text,View } from 'react-native'
import styles from './styles'
export default function Page1() {
const [isLoading,setIsLoading] = useState(true)
const [page,setPage] = useState(1)
const {burgerDataBase} = useContext(BurgerContext)
useEffect(() => {
//change loading state after a settimeout function here
console.log('--------------------START OF BURGERBASE PAGE1-----------------------')
console.log(burgerDataBase) // i have my data as an array in my console here
console.log('---------------------END OF BURGERBASE PAGE1----------------------')
setTimeout(() => {
setIsLoading(false)
}, 1500);
}, [burgerDatabase])
const dataToShow = burgerDataBase.map(function(item,i){
<Text>{item.url}</Text>
})
if(isLoading){
return(
<View>
<Text>Loading ...</Text>
</View>
)
}
if(page === 1){
return (
<View style={styles.container}>
<View style={styles.page1body}>
<Text onPress={() => setPage(2)}>Go to Page 2.</Text>
{dataToShow}
</View>
</View>
)}
if(page === 2){
return(
<PageFav data={burgerDataBase}/>
)
}
}
App.js with fixed Context definition:
import React, { useState } from "react";
import Page1 from "./Page1";
export const BurgerContext = React.createContext();
export default function App() {
const [burgerDataBase, setBurgerDataBase] = useState([
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
}
]);
return (
<BurgerContext.Provider value={{ burgerDataBase, setBurgerDataBase }}>
<Page1 />
</BurgerContext.Provider>
);
}
Page1.js (without import styles from './styles')
import React, { useState, useEffect, useContext } from "react";
import { BurgerContext } from "./App";
import { Text, View } from "react-native";
export default function Page1() {
const [isLoading, setIsLoading] = useState(true);
const [page, setPage] = useState(1);
const { burgerDataBase } = useContext(BurgerContext);
useEffect(() => {
//change loading state after a settimeout function here
console.log(
"--------------------START OF BURGERBASE PAGE1-----------------------"
);
console.log(burgerDataBase); // i have my data as an array in my console here
console.log(
"---------------------END OF BURGERBASE PAGE1----------------------"
);
setTimeout(() => {
setIsLoading(false);
}, 1500);
}, [burgerDataBase]);
const dataToShow = burgerDataBase.map((item, index) => (
<Text key={index}>{item.url}</Text>
));
if (isLoading) {
return (
<View>
<Text>Loading ...</Text>
</View>
);
}
if (page === 1) {
return (
<View>
<View>
<Text onPress={() => setPage(2)}>Go to Page 2.</Text>
{dataToShow}
</View>
</View>
);
}
}
Your dataToShow is called only one time, when it's first mounted that time loading was showing. after loading completed you set to re render item but only when there is change in burgerDatabase (inside array of use effect) but burgerDatabase is not changing at all so rendering is not working
change like this.
create empty state of array
store burgerDatabase in state which you created in step 1, (inside timeout where loading is false)
now when loading is set to false, that time burger new state is set and it will re render.
use newly created state to render items.
The final solution was to return what was inside the map and not forget to add inside the useEffect [burgerDataBase]. Both combined made it works , thx everyone !
I want implementation app-tour in my project , I installed react-native-app-tour .I have a View that I want assign app-tour to it and I use ref in view that it dispatch AppTourView to inputreducer and finally in useEffect I run appTour but when I run app I encountered Error that error is Tour view does not have React internal Fiber, please can help me
import React, {
useState,
useEffect,
useCallback,
useReducer,
useRef,
} from 'react';
import {AppTour, AppTourSequence, AppTourView} from 'react-native-app-tour';
const inputReducer = (state, action) => {
if (action.type == 'SET_APPTOUR') {
return [...state.appTour, action.data];
}
};
export default function HomeScreen(props) {
const [forsat, setForSat] = useState(null);
const [appTourTargets, dispatchAppTour] = useReducer(inputReducer, {
appTour: [],
});
useEffect(() => {
setTimeout(() => {
console.log(appTourTargets);
let appTourSequence = new AppTourSequence();
appTourTargets.appTour.forEach(appTourTarget => {
appTourSequence.add(appTourTarget);
});
AppTour.ShowSequence(appTourSequence);
}, 1000);
}, [appTourTargets]);
return(
<view style={styles.container}>
<View
ref={useCallback(ref => {
if (!ref) return;
setForSat(ref);
let prop = {
order: 12,
title: 'This is a target View',
description: 'We have the best targets, believe me',
outerCircleColor: '#3f52ae',
cancelable: false,
};
dispatchAppTour({type:'SET_APPTOUR', data:AppTourView.for(ref, {...prop})});
}, [])}
style={styles.rankContainer}>
<BText font="_Light" size={15} color={color.firstColor}>
فرصت{' '}
<BText font="_Bold" color={color.secondColor} size={15}>
{FormatHelper.toPersianString(daysToGo.toString())}
</BText>{' '}
روز تا کنکور
</BText>
</View>
</view>
)
}
I am learning react native as beginner.
I want to create a chatbot using Dialogflow in react native in Expo.
I have searched all the forums and googled , but did not find any reference of using Dialogflow specifically to Expo though found reference to React Native CLI.
In this context, can anyone please guide me how to create a chatbot using Dialogflow in Expo React Native
Here you will have a great tutorial!
https://blog.jscrambler.com/build-a-chatbot-with-dialogflow-and-react-native/
if this help you please check it as correct answer...
here bellow some code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { Dialogflow_V2 } from 'react-native-dialogflow';
import { dialogflowConfig } from './env';
const BOT_USER = {
_id: 2,
name: 'FAQ Bot',
avatar: 'https://i.imgur.com/7k12EPD.png'
};
class App extends Component {
state = {
messages: [
{
_id: 1,
text: `Hi! I am the FAQ bot 🤖 from Jscrambler.\n\nHow may I help you with today?
`,
createdAt: new Date(),
user: BOT_USER
}
]
};
componentDidMount() {
Dialogflow_V2.setConfiguration(
dialogflowConfig.client_email,
dialogflowConfig.private_key,
Dialogflow_V2.LANG_ENGLISH_US,
dialogflowConfig.project_id
);
}
handleGoogleResponse(result) {
let text = result.queryResult.fulfillmentMessages[0].text.text[0];
this.sendBotResponse(text);
}
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages)
}));
let message = messages[0].text;
Dialogflow_V2.requestQuery(
message,
result => this.handleGoogleResponse(result),
error => console.log(error)
);
}
sendBotResponse(text) {
let msg = {
_id: this.state.messages.length + 1,
text,
createdAt: new Date(),
user: BOT_USER
};
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, [msg])
}));
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1
}}
/>
</View>
);
}
}
export default App;