Recently I ejected a Managed Workflow project and now I’m on Bare Workflow, things were going pretty good until now.
I was able to add native libraries and are working OK such as segment’s analytics-react-native and I’ve created a build for both iOS and android devices to run the dev client (instead of Expo Go). But now I wanted to add a composerEnhancer to see my store on react-native-debugger app and after setting it up I just get “no store found. Make sure to follow the instructions” on a browser tab.
import { combineReducers, createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import ReduxThunk from "redux-thunk";
const rootReducer = combineReducers({
auth: authReducer,
cart: cartReducer,
});
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(ReduxThunk)
)
);
return (
<Provider store={store}>
<Navigation />
</Provider>
);
}
I tried same config in a Bare workflow with Exgo Go Client and it’s working fine. But I can’t make it work on Custom Dev Client, any thoughts?
Related
I am trying to write a custom plugin for our Docusaurus site. I am able to wire up the custom component, but I cannot use hooks like useState or useEffect. The page crashes saying I'm using an invalid React hook.
I know its possible to use hooks because I see other plugins doing it so I'm sure its a syntax problem somewhere.
Here's my code:
index.ts
import path from 'path'
module.exports = function () {
return {
name: 'docusaurus-theme-myorg-technology',
getThemePath() {
return path.resolve(__dirname, './theme')
}
};
};
theme/index.tsx
import React from 'react'
import {CustomTOC} from './CustomTOC'
const WrappedTOC = (props: any) => {
return (
<CustomTOC {...props} />
);
};
export default WrappedTOC;
theme/CustomTOC.tsx
import React, { useState } from 'react';
import TOC from '#theme-init/TOC';
export default function CustomTOC(props: any) {
//const [tags, setTags] = useState<any[]>([]); <-- if I comment this out the page crashes
return (
<>
<TOC {...props} />
Hello world
</>
);
}
"Invalid hooks call" link to a doc page, that you should read carefully.
Most likely: you are using a different version of React for your component lib that the one Docusaurus uses internally, and it leads to the React lib being used twice at runtime. Make sure the final project will only include one React version. You can for example use the exact same version that the one Docusaurus uses
What is the simplest way to implement Multi-Platform Setup for a component in Expo. I have tried mamy diferent ways.. it was working on web but it is failing on Native and failing with Jest & #testing-library/react-native. Ideally I would like the least amount of custom config etc (do not want to eject). I expect the file structure to look like this:
Component
|- index.tsx
|- Component.native.tsx
|- Component.web.tsx
I am not sure how to do the index.tsx. I saw someone say something like this would work:
// index.tsx
// #ts-ignore
export { default } from "Component"
this didn't work so I did
// index.tsx
// #ts-ignore
export { default } from "./Component"
This worked for web, but the jest test said
Cannot find './Component'
However, Jest was able to find:
'./Component.mobile.tsx'
'./Component.web.tsx'
I tried:
// index.tsx
// #ts-ignore
import Component from "./Component";
export default Component
and the tests was the same
and the native emulator said:
Unable to resolve module ./Component
I tried using lazy loading but this does not work on web.
import { lazy, Suspense } from "react";
import { Platform } from "react-native";
import Loading from "../../components/Loading";
import { ComponentType } from "./types";
const Web = lazy(() => import("./Component.web"));
const Mobile = lazy(() => import("./Component.mobile"));
const Component: ComponentType = (props) => {
const isWeb = Platform.OS === "web";
return (
<Suspense fallback={<Loading message="Loading Component" />}>
{isWeb ? <Web {...props} /> : <Mobile {...props} />}
</Suspense>
);
};
export default Component
Questions
how to use diferent files for components depending on platform (exlude other files from build)
how to make it ok with ts in vscode
Using Expo 44. Thanks
I would use named exports. So begin by having the same component name in both files. Next I would have one file called Component.tsx and the other Component.native.tsx. That will be enough to allow the bundler to pull the native for native and the other for non-native (in other words web). That should be all you need.
i have a react native app that i'm trying to have a chat functionality with , which worked just great and just as i expected until i was ready to post for production . the whole code works perfectly with expo start and development mode but when i run the app with production mode sockets do not work at all. or they work partially.
i have two apps and in one it recieves but don't send messages and the other one doesn't do anything at all(one is android and the other is ios).
i'm connecting to my socket io using the following:
in App.js...
import { SocketContext , socket } from "./context/socket";
return (
<SocketContext.Provider value={socket}>
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
<Toast ref={(ref) => Toast.setRef(ref)} />
</SafeAreaProvider>
</SocketContext.Provider>
);
in my socket.js file i have:
import OpenSocket from "socket.io-client";
import { API_URL } from "../constants/API";
import React from 'react';
import useRoom from "../tools/useRoom";
import useSession from "../tools/useSession" ;
import useUser from "../tools/useUser" ;
// import AsyncStorage from "#react-native-async-storage/async-storage";
// import { AsyncStorage } from "react-native";
export const userIDStorage = 'user-id'
// const {userID , sessionID } = await getUserID();
export const socket = OpenSocket.connect(API_URL);
socket.on('connect',()=>{
console.log('user connected...');
// TODO ==> check if there is a local room saved and if it is active...
});
export const SocketContext = React.createContext();
and in my chat page i have the following to call and emit from the socket ::
import { SocketContext } from "../../context/socket";
const socket = useContext(SocketContext);
in the rest of the page i just call
socket.emit('something',{data});
as such...
anyways there is no output to actually get in expo production mode apps but i was able to deduce that when the app is in production mode sockets aren't firing by testing every line of the code alone on different events... and when i'm in development mode everything works as it should.
Note :
for the server side i'm using a heroku hosted express but i didn't add anything about it here cuz i tested the apps on development mode with the production server and they work fine it's just when they are in producion mode they don't work anymore.
I am a newbie in react-native and I'm trying to use the react-native-ui-kitten library. The problem is that the documentation is not really helpful.
I have I have installed ui-kitten and the theme as indicated with the command: npm i react-native-ui-kitten #eva-design/eva
The documentation asks to configure the application root which I consider to be the App.js file unless I'm wrong.
So i changed the App.js generated code to this:
import React from 'react';
import {
mapping,
theme,
} from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
export default class App extends React.Component {
public render(): React.ReactNode {
return (
<ApplicationProvider
mapping={mapping}
theme={theme}>
<Application/>
</ApplicationProvider>
);
}
}
Unfortunetely it's not working.
Has anyone recently used ui-kitten library ?
What does the documentation mean by Application Root and how to set up a simple react-native project to use react-native-ui-kitten?
And yes I actually checked the documentation but maybe there is something I am not doing right.
I ran into the same problem.
I discovered that the creators of this UI kit use in fact in their code examples Typescript.
So you need to recreate your Reactnative project using a Typescript template, then rename accordingly the App.js into App.tsx
Any other components need to be renamed with the extension .tsx.
Make sure you read about Typescript:
https://www.typescriptlang.org
Here it is how you can recreate your project with Typescript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
All the best,
I am also a beginner in react-native and it seems we kinda differ in implementing the code. I am not sure if this would help but this is the way I implement your code:
import * as React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Application/>
</ApplicationProvider>
);
export default App;
You could try it and let me know if this suits you. Good luck!
This question has been asked before but I cannot find a working solution so I'm taking the liberty to show my code in case I am missing something. I have a react native app and using redux. I have been using remote-redux-devtools for two months on this project now, but the tool stopped working all of a sudden. I receive a "SocketProtocolError" in the console and will paste that below as well as my code.
Redux store
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import thunk from "redux-thunk";
import reducers from "../../State/reducers/index";
const composeEnhancers = composeWithDevTools({ realtime: true });
const store = createStore(
reducers,
{},
composeEnhancers(applyMiddleware(thunk))
);
export default store;
In my package.json file I am using "remote-redux-devtools": "^0.5.13"
This is the error I get in the console.
Any help would be greatly appreciated!
I fixed the same error when debugging an app on my phone by running:
adb reverse tcp:5678 tcp:5678
to allow the phone to connect to the devtools. Adjust the port number if using a different one. If you're running the app in an emulator on your computer, this probably won't help.