I am trying to use react-client-session :https://github.com/grizzthedj/react-session in a react native application. I am almost literally copying the example:
import ReactSession from 'react-client-session';
<Button
style = {styles.button}
title="Submit"
onPress={() => {
ReactSession.setStoreType("localStorage");
ReactSession.set("playerName", selectedValue);
/* 1. Navigate to the Character Skill Sheet route with params */
navigation.navigate('SkillSheet', {
playerName: selectedValue
});
}}
color="#19AC52"
/>
The expected result is that I press the button and along with navigating to the SkillSheet view it will set the session variable playerName = selectedValue.
But when I click the button I get this error: TypeError: undefined is not an object (evaluating '_reactClientSession.default.setStoreType')
Is react-client-session still in use? If so what am I doing wrong? Here is the other link to it: https://www.npmjs.com/package/react-client-session
This is the full file that I am trying to do this in:
CharacterSelectScreen.js
import React, {useState} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Button, Picker, ScrollView} from 'react-native'
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import { userFetch } from '../../sharedComponents/userFetch.js';
import { styles } from './styles.js';
import ReactSession from 'react-client-session';
const CharacterSelectScreen = ({navigation, route}) => {
const [characterList, setCharacterList] = useState([]);
const [selectedValue, setSelectedValue] = useState("Choose..");
//Using React.useEffect to simulate React's #componentDidMount
React.useEffect(()=>{
console.log('Select Screen loaded.')
//Must use an async function to call the userFetch function then set the result equal to characterList
const asyncFunc = async () => {
const charList = await userFetch();
setCharacterList(charList);
}
//Call the async function
asyncFunc();
},[])
return (
<View style={styles.container}>
<Text style={{marginLeft: 130}} h1>Select a character:</Text>
<Picker
style={styles.charPicker}
mode="dropdown"
selectedValue={selectedValue}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
{characterList.map((item, index) => {
return (<Picker.Item label={item} value={item} key={index}/>)
})}
</Picker>
<Button
style = {styles.button}
title="Submit"
onPress={() => {
ReactSession.setStoreType("localStorage");
ReactSession.set("playerName", selectedValue);
/* 1. Navigate to the Character Skill Sheet route with params */
navigation.navigate('SkillSheet', {
playerName: selectedValue
});
}}
color="#19AC52"
/>
</View>
)
}
export default CharacterSelectScreen;
And here is what is in my yarn.lock:
react-client-session@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/react-client-session/-/react-client-session-0.0.7.tgz#b1bdee73d2dd29a0cd2ed220c91bd86671787dec"
integrity sha512-UeiECmKybfqTp/Fk7qCOs0OV/Lnw3km5vNoYnVjygVDwqg8SPm8YzFKJcFsmNDhPh6Ak1oCjAySJfSDrSZglbQ==
Documentation seems to be wrong or out of date.
The package exports a single named export like this:
export {
ReactSession
};
So it should be imported like this (the difference is in curly brackets):
import { ReactSession } from 'react-client-session';
P.S.
You can found out more about two different types of export here.