Questions tagged [react-native-web]
react-native-web is a library aims to make react-native projects able to run in web browser, by providing the same Components and APIs of react-native for web.
456
questions
0
votes
0
answers
19
views
Cannot build react-native project for web that uses @sentry/react-native and react-native-web
The existing configuration for compilation seems to have issues compiling some syntax used in sentry source code. The screenshot shows two places where the exception occurs.
Here is the configuration ...
1
vote
1
answer
35
views
How to use hash '#' in the URL with @react-navigation
I am working with react native web, where @react-navigation is used for navigation. I am using linking so that users can navigate using the URL.
my linking configuration looks like
const linking = {
...
0
votes
0
answers
36
views
React Navigation Not working in production mode
I'm building an app using React Native. I'm also planning to use the same code to build the website.
However, when I deployed the web-build the whole website crashed on page refresh. It works fine ...
0
votes
1
answer
50
views
React Native throwing missing dependency error
I'm cloning a existing react-native project with typescript support. But when I tried to install the node_modules package it started to show this error and does not start the project even after ...
0
votes
2
answers
33
views
How to enable horizontal scroll in Flatlist?
I normal flat list in react native and I have react native web that renders the mobile component in web
I am hiding the scrollbar with the prop showsHorizontalScrollIndicator={false},
The scrolling ...
1
vote
0
answers
47
views
React on both mobile and web
I've been trying to research this but haven't found much information on it. I'm investigating writing React in Typescript in code that can be both run on mobile but also the web. I've seen some ...
0
votes
1
answer
45
views
How to debug react-native-web with Expo and vscode?
I am trying to find how react-native-web apps (specifically using Expo and vscode) can be debugged.
I found guidance neither in the web, nor in the react-native-web's own site.
The debug ...
0
votes
1
answer
38
views
Unable to run Expo bare workflow Web
I already have a bare workflow app developed that runs for IOS and Android. Now, I want to run the app on the web.
When I try to run using "yarn run web", I get errors that start with "...
1
vote
2
answers
44
views
Advice needed for ReactJS Equivalent of React-Native-Web stylesheet.flatten
So we are trying to remove React-Native-Web from our codebase, and I was wondering what the ReactJS equivalent of stylesheet.flatten was?
We are using it like this;
const flattenMyStylesheets = ...
1
vote
0
answers
43
views
How to create rich-text-editor for react-native-web?
I can not find how to create rich-text-editor in react-native-web.I did not find any package which work in react-native-web.if anyone know about the solution so please share the solution.
0
votes
2
answers
34
views
How to remove the Insert ; errors in react-native followed by prettier prettier
Trying to fix the error since long , not able to figure it out why I am getting errors due to some
prettier/prettier thing which keeps on saying that 'Insert ;' / 'Insert enter' in my react-native ...
0
votes
0
answers
47
views
exports is not defined webpack 5 babel 7 react-redux
i am trying to develop a react-native app with react-native-web, everything was working fine until i installed react-redux.
i get the following error in the console
bundle.web.js:9435 Uncaught ...
0
votes
0
answers
34
views
React Native on Web for développement : How send credential cookie
I am developing a React Native apps that use a .net core web API back end.
When I develop, I would like to use the web interface that I get when I type :
expo start --web
This command open this url : ...
1
vote
1
answer
105
views
How to hide scrollbar in expo web React Native
How can I remove or style scrollbar in the expo app. When I apply overflow: scroll I get scrollbar both vertically and horizontally, I would like to remove horizontal scrollbar and style the vertical ...
0
votes
0
answers
64
views
Module resolver not working in react native web
I have existing project in that I have successfully added react-native-web package. in that project it was using module resolve path in all file with
npm install --save-dev babel-plugin-module-...
1
vote
0
answers
39
views
Style an (complex) SVG on react-native web
I am trying to style a complex SVG (which is more like a map), with many sub-elements on react-native web.
What's the best solution to style all the child elements with a single css-like styling ...
0
votes
1
answer
198
views
onEndReached running in FlatList when page loads in react-native-web
I have been experimenting with infinite scrolling in React Native. The aim is to load 400 items overall and to load 20 each time the user hits the bottom of the FlatList element. In react-native-web, ...
0
votes
2
answers
71
views
is react-native-navigation works on react-native-web app?
I have react-native project and I am using react-native-navigation, now I want to give support for web, is react-native-navigation work on react native web?
0
votes
1
answer
48
views
RN Web, href in TouchableOpacity: onPress >navigation, onRight click > context menu with possibility to open link
I have a site with TouchableOpacity that uses react-navigation to navigate to another screen. Is it possible in some way to add href to this button so I could open the another screen in new tab using ...
0
votes
1
answer
55
views
RN Web + Firebase: snapshot listeners unsubscribe in unmount vs in global unmount (using context)
In short: which is most memory + cost efficient way to use Firestore snapshot listeners, unmount them always at screen unmount or have the unsubscribe function in context and unmount when whole site &...
0
votes
0
answers
198
views
How to resolve React Native Web error "This experimental syntax requires enabling one of the following parser plugin(s): 'jsx', 'flow', 'typescript'."
I have been working on a react-native-web project without issue and recently added the react-native-gifted-charts module which is when I began receiving this error:
/node_modules/react-native-gifted-...
0
votes
0
answers
49
views
ui-kitten for react native web
I have successfully implement the react native web support in react native project. And i have install the @ui-kitten/ library. but when i run in the web it giving error in browser.
Uncaught ...
0
votes
0
answers
37
views
I am getting error in web browser when i run app in web
i have successfully implement the web support for existing react native application. But when i run for web it giving blank page and in console it giving error like below.
please help
Uncaught ...
0
votes
0
answers
37
views
React Native Web implement SSR
https://necolas.github.io/react-native-web/docs/rendering/
After reading the SSR example from the document, I still don't know how to implement SSR
And I don't want to apply SSR with other framework ...
0
votes
3
answers
877
views
React Native: Opening a Modal from inside another Modal doesn't work in iOS
I have a Dropdown component which is just a React Native Modal positioned next to a toggle - the Modal allows me to make the whole background a Pressable so I can close the dropdown when any area ...
0
votes
1
answer
109
views
SvgXml inside react native storybook for web
I'm implementing StoryBook in a react-native project and running it on the web and mobile with that design:
https://storybook.js.org/addons/@storybook/addon-react-native-web
https://github.com/dannyhw/...
0
votes
1
answer
119
views
React native web support
I have project in react native and it was build in iOS and android successfully. I have not used react native cli for that project. Now I have to give support for web. So when I run the app all ...
0
votes
0
answers
97
views
findAndUpdateNodes was passed a nullish node
I get this error in the console while dragging (react native web by the way). Otherwise everything seems to work perfectly. I don't know what it means, and why it happens, but I still want to get rid ...
0
votes
0
answers
218
views
react-native-web picker strange behavior on web mobile
We're using react-native-web which allows for reactJS and react-native in one codebase. Form components can be tricky in getting them to work for web, mobile web and native. We're using Picker for a ...
2
votes
1
answer
194
views
React-native-web Multi-Platform Setup using Expo 44 + Typescript
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 & @...
0
votes
1
answer
43
views
Stop FlatList from overflowing containing View?
Edit: Snack repro: https://snack.expo.dev/hwTTY2tQm
How do you make a FlatList stop expanding beyond its enclosing view and become scrollable while still taking all (legal) space in the enclosing view?...
0
votes
0
answers
51
views
Create a website with React Native Expo or React Native Web
I have a mobile app created with React Native. I wanted to create a website of the app and I was thinking of using expo. I also saw there is an React Native Web.
Is expo web the same as react native ...
0
votes
1
answer
119
views
How do I constrain an Expo Web or React Native Web App to Browser Window Size?
since there's no concept of page-level scrolling on iOS and Android React Native apps things work out fine. However, on React Native Web my app components expand beyond the bounds of views and cause ...
0
votes
1
answer
128
views
Property '_value' does not exist on type 'Value' (in React Native docs example)
I am trying out PanResponder, and started off of the example in the React Native documentation. I'll copy part of the example code here:
const Example = () => {
const pan = useRef(new Animated....
1
vote
2
answers
189
views
React Native text input is not responding to touch and not focusing when in multiple Modals
Our project requires us to use a modal that is inside another modal(I know it`s bad but it was not my decision :) ) and it seems like text inputs are unable to focus when they are inside nested modals?...
0
votes
1
answer
281
views
Localhost:8080 showing blank page with react-native-web
i followed a tutorial for adding web support to a react native app. using react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page. even though it works just ...
2
votes
1
answer
238
views
How to use compression-webpack-plugin with React Native Web/Expo/Nginx
I have a React Native Web site built with Expo and using Nginx in a docker container.
I just tried to add compression-webpack-plugin, and my current webpack.config.js looks like this:
const ...
7
votes
3
answers
3k
views
React-Native-Web error: rnw_blogpost.bundle.js:1414 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
Adding react-native-web package to existing RN app (made with react-native init). Following the setup from this site:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-...
0
votes
0
answers
100
views
How to enable experimental syntax 'jsx' in react-native-web?
I am working on React-native-web application while implementing drawer navigator/image slider and other's, getting some error's.
I have created .babelrc file where I have added these lines
"...
0
votes
0
answers
57
views
How to use FlatList with pagingEnabled in expo-web?
I'm trying to create a swiper gallery in expo.
const viewableItemsChanged = useRef(({ viewableItems }) => {
setCurrentIndex(viewableItems[0].index);
}).current;
<Animated.FlatList
...
0
votes
1
answer
95
views
How to set browser tab title with route name in React Native
currently in my app, the browser tab title is just the name of the screen. However I want to set the tab title to {APP_NAME} - {PAGE_NAME}. I am using a <Stack.Navigator/> and I know that you ...
0
votes
1
answer
41
views
Any one know a solution for this
This is a react native web project, web app is working fine. But when I try to run it in the mobile this comes in the emulator. see below,
0
votes
0
answers
140
views
CSS hover not working when wrapped with media query
I am using react-native-web and NextJS and want to change the hover styles depending on breakpoint using media queries. Without media queries, this code works on hover:
packshotHoverHighlighted: {
...
0
votes
0
answers
48
views
How can I use pseudoclass :hover in react-native-web?
I have this styles code which allows me to use media queries in react-native-web:
landscapePackshotHolder: {
boxSizing: 'border-box',
width: 'calc(20% - (8% - 10px)/5)',
padding: '0 10px',
...
0
votes
0
answers
47
views
react-native-web after deploying and refreshing the page 404
enter image description herewith linking in react-native-web am able to see the paths and working fine if I reload the page also in my local.
after it is deployed(in apache tomcat) also works fine ...
2
votes
0
answers
268
views
Babel can't transpile the TypeScript syntax in react-native core's js file (using webpack)?
I got a mobile app that was written in react-native, now I want to run this app on web browser (maybe as an electron app later) so I use react-native-web and webpack to help compile the same code base....
0
votes
1
answer
50
views
Something I can use with React Native for web
I like React Native's some features like Flatlist, Modal, Animation. I wanted to develop for web with React Native or Expo. I use react navigation but have 404 errors in refresh pages. I also want ...
1
vote
1
answer
292
views
How to remove this blue outline in iOS browsers for UI Kitten input component
I use UI Kitten + expo + react-native-web for my project, when I open my app in ios browsers, e.g. chrome, safari, the text input when focused has this blue outline, for example: (I can't post images ...
1
vote
0
answers
46
views
Popup manu placed behind other items using React Native Expo Web
I have the next layout on the page:
And I'm trying to add popup menu like on youtube mobile app:
but I can't place it above other elements. React Navive for web creates own stacking context for each ...
0
votes
0
answers
152
views
Too many re-renders. React limits the number of renders to prevent an infinite loop. and does not point where
AppRegistry.registerComponent('main', () => withExpoRoot(component));
if (Platform.OS === 'web') {
const rootTag = document.getElementById('root') ?? document.getElementById('main');
...