React Native Modal visible prop does nothing - reactjs

Hello I am trying to put a simple react native modal in my react native app (running it on expo) but it is always visible. When I set the visible prop to false, it still displays. The relevant code is below:
Main Component
import React, {Component} from 'react';
import {View, Text, Modal} from 'react-native';
class Home extends Component {
render() {
return (
<View>
<Modal visible={false}>
<Text>Test</Text>
</Modal>
</View>
);
}
}
package.json
"dependencies": {
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
Basically the modal is always displaying, even though visible is set to false. Am I missing something here?

I try many ways want to found the problem. The result is:
It seems couldn't work correct on "web site" show, but work on ios or Android emulator.
I try your code on Doc could work, but on sandbox(web site) couldn't.
Maybe you could change to try on other emulator or Expo except "web apps" like "expo ios" or "expo Android"?

Related

IonContent not rendering under IonicPage. React. No error

EDIT: I believe the reason that I ran into this problem is I didn't use the ionic start command to create my project and because I didn't have the Ionic CDN in my HTML file.
I hope I can explain this issue I'm having in a clean and concise way.
Environment Information
I am currently using Ionic 6 with React 18
And here are my Dependencies:
"dependencies": {
"#ionic/react": "^6.1.2",
"#ionic/react-router": "^6.1.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.27",
"#types/react": "^18.0.6",
"#types/react-dom": "^18.0.2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"dart-sass": "^1.25.0",
"node": "16.14.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router": "^5.3.1",
"react-router-dom": "^5.3.1",
"react-scripts": "5.0.1",
"reactstrap": "^9.0.2",
"testcafe-react-selectors": "^4.1.5",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#types/jest": "^27.4.1",
"#types/node": "17.0.24",
"#types/react": "^18.0.5",
"#types/react-dom": "^18.0.1",
"#types/react-router": "^5.1.18",
"#types/react-router-dom": "^5.3.3",
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.5.1",
"prettier": "^2.6.2",
"react-scripts": "^5.0.1",
"start-server-and-test": "^1.14.0",
"testcafe": "^1.18.6",
"typescript": "4.6.3",
"typescript-plugin-css-modules": "^3.4.0"
},
Goal
I want to be able to have an Ionic React multi-page application. Obviously it will still be a SPA and not actually have different pages but I want to utilize Ionic's IonPage component which creates a new React View that can be navigated to.
Expected Results
I've stripped much of my project to just bare bones components that I want to be able to use to create a side navigation and be able to navigate to each page and see the contents. Currently I'm just trying to get the ability to see everything from a React Component wrapped in IonPage. This is my App.tsx page:
App.tsx
import { IonApp, IonRouterOutlet, setupIonicReact } from '#ionic/react';
import { IonReactRouter } from '#ionic/react-router';
import React from 'react';
import { Route } from 'react-router';
import Home from './components/Home';
import './custom.css';
setupIonicReact({
mode: 'md',
});
function App() {
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/" component={Home} exact={true} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
}
export default App;
I've tried a variety of layouts for my Home.tsx file. Currently this is what is inside
First situation
Home.tsx Current Version
import { IonContent, IonHeader, IonPage } from '#ionic/react';
import React from 'react';
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>Example</IonHeader>
<IonContent fullscreen>
<h1>Test</h1>
</IonContent>
</IonPage>
);
};
export default Home;
With this setup, the Example Header text shows and is styled like a header correctly. However, the Content Text doesn't show up at all on this. I've determined the reason why it doesn't show up is because the ion-content element/component's height is set to 0. This is not expected. We don't have any css in our project targeting ion-content elements.
Second situation
import { IonContent, IonPage } from '#ionic/react';
import React from 'react';
const Home: React.FC = () => {
return (
<IonPage>
<IonContent fullscreen>
<h1>Test</h1>
</IonContent>
</IonPage>
);
};
export default Home;
In this situation I expect the elements inside of the IonContent Component to be rendered. I originally didn't have the 'fullscreen' attribute but added it recently to test if it was different. It didn't have an affect. What the result is is a completely blank page with the ion-page having width of 0 as well as the ion-content having a width of 0. If I set the widths of the ion-page manually it appears the ion-content's width and height update as well and it shows the content I was looing for.
Third Situation
import { IonContent } from '#ionic/react';
import React from 'react';
const Home: React.FC = () => {
return (
<IonContent fullscreen>
<h1>Test</h1>
</IonContent>
);
};
export default Home;
In this situation I've removed the IonPage element from the page. Surprisingly it appears that the content is displayed in this situation even though I've seen online that the IonRouter need to find an element with IonPage.
What I want to achieve:
I want to be able to have a react component with IonPage, IonHeader, and IonContent and have all elements inside of these render on the page when navigated to it.
What I want to know
What is causing the IonPage to behave strangely by having 0 height at some points. Why does the Content not show when wrapped around an IonPage but an IonHeader wrapped around an IonPage does show.
No Error Messages Available
Additional Notes
I also attempted to create a new IonicProject with react 17 instead of 18 as I thought it was a support issue, but it appears with the same full code with IonPage, IonContent, and IonHeader the content was not displaying. Thank you for your time!
I basically created a sidenav template from ionic start and determined all of the differences between the two projects.
I eventually determined that there are additional css import statements that I didn't realize I needed to add to my App.tsx in order for the IonApp,IonHeader,IonContent to work correctly.
These are the imports I found from the template project:
/* Core CSS required for Ionic components to work properly */
import "#ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "#ionic/react/css/normalize.css";
import "#ionic/react/css/structure.css";
import "#ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "#ionic/react/css/padding.css";
import "#ionic/react/css/float-elements.css";
import "#ionic/react/css/text-alignment.css";
import "#ionic/react/css/text-transformation.css";
import "#ionic/react/css/flex-utils.css";
import "#ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.css";
The theme variables are option and if there isn't a variables.css file in the theme folder it will give an error.
However after adding these import statements all of the content on the page renders.

React, Typescript, Redux - <Link to=URL> causes component to dissapear

Background
App is created via npx create-react-app rrts --typescript. Which sets up React, Redux, Typescript.
Visual Representation Of The Problem
(Content is the component with sentences)
https://gyazo.com/bb14af9cb3f0870107ec775a328e60c0
Description of Problem
When the Logo is clicked (which has <Link to="\">) is clicked, the component (called Content) that is supposed to show up dissapears. Content renders when the page loads, but it disappears if the logo is clicked.
What I have tried
I re-built my app with
https://codesandbox.io/s/gracious-forest-0ilef?file=/src/reducers/index.tsx
The sandbox works perfectly. None of the components are
disappearing when <Link to=url/> is clicked. Concluding that how
I set up the code is not the issue. In my actual project, I
believe the issue is in import history and typescript because <Router history={history}> works in non-typescript react projects.
Particulary here in history.tsx
import { createBrowserHistory } from "history";
export default createBrowserHistory();
I installed it via npm -i history --save. Docs. Not
installing history would give me a history module not found
on my imports.
Picture of console.log(history) being used in App.tsx:
My dependencies:
"#types/jest": "^24.9.1",
"#types/node": "^12.12.50",
"#types/react": "^16.9.42",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.5",
"cloudinary-react": "^1.6.2",
"#types/react-redux": "^7.1.9",
"axios": "^0.19.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"
[1]: https://www.npmjs.com/package/history
Came across history/createBrowserHistory broken for TS on latest release (v4.9.0)
Tried the suggestion of renaming history.tsx to browserhistory.tsx. Did not work.
What the poster said:
In history.ts,
import { createBrowserHistory } from 'history' // --> seems like a conflict
export default createBrowserHistory()
so I renamed my file to browserhistory.ts and it worked fine again.
In browserhistory.ts,
import { createBrowserHistory } from 'history' // --> no more conflict occurs
export default createBrowserHistory()
Solved in:
https://github.com/ReactTraining/history/issues/822
npm install history 5.0.0 is bugged. and history,push() will somehow make your component dissapear.
Installing npm install history#4.10.1 solved the issue.

Typescript 3.7.2, React and Material UI 4.5.1 Snackbars - trying to do an error popup but get styles errors

I am trying to use the material UI snackbar to show pop up errors in my react application.
I am using a container view. In that view, it does some stuff and errors can be thrown. If it does get an error, I want to render my custom snackbar component.
This is my ErrorPopup component:
import React from 'react';
import { Snackbar } from '#material-ui/core';
import MuiAlert, { AlertProps } from '#material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
In my main view, I call this component like so:
<ErrorPopup message={this.state.errors} />
What seems to happen is I get errors that seem to me to indicate something about the WithStyles + typescript issue crops up, but I am out of my depth to fully understand what is going on. I just expected it to work as all my material UI stuff has worked up until now.
I have tried a couple of quick cut n paste run n gun type fixes off the net (as you do), but I clearly don't know what exactly is going on, so I need to at least start there.
Here is a screen grab:
With styles errors perhaps?
First off, is this approach to showing the errors ok?
Secondly, can anyone point me in the right direction here?
Frustratingly, I just ran an npm update on my project, and things started to work.
For anyones reference, my dependencies in package.json
"dependencies": {
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.39",
"#types/pouchdb": "^6.4.0",
"#types/react-router-dom": "^5.1.3",
"clsx": "^1.0.4",
"highcharts": "^7.2.1",
"highcharts-react-official": "^2.2.2",
"pouchdb": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pubnub": "^4.27.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"request": "^2.88.0",
"typescript": "^3.7.4"
},
Whilst this solves my original problem getting it working, is this the right approach?
Cheers

Tooltip transitions not working using reactstrap

I'm trying to show tooltips using reactstrap. The tooltips appears correctly but without fade-in/out transitions. Using the inspector I noticed that the class fade does not get applied to the tooltip <div>:
I followed the installation instructions on https://www.npmjs.com/package/reactstrap#adding-bootstrap adding these dependencies to my package.json using yarn:
"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",
This is an example component of tooltip usage taken from my app:
import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';
export default class ExampleTooltip extends React.PureComponent {
constructor(props) {
super(props);
this._id = `autogeneratedid-${nanoid()}`;
}
render() {
return (
<>
<span id={this._id}>Hover me!</span>
<UncontrolledTooltip target={this._id}>
My tooltip
</UncontrolledTooltip>
</>
);
}
}
I'm including bootstrap using SASS in my index.js file:
import '../styles/style.scss';
And in my style.scss:
#import 'bootstrap/scss/bootstrap.scss';
Am I missing something?
I created a codesandbox on https://codesandbox.io/s/01zm5k5w10
Thank you.
It looks like the problem is not on the CSS/SASS - it's not some class that you are missing or not includes - but its something in you're react/js because it's not applied the "fade show" classes to the wrapper div like on the docs website.
Edit - Its looks like they have some issue on their code - all the real example of reactstrap except for their documentation site - have the same issue with fade effect - for example, your sandbox, a lot of examples from codepen that i cant paste here and more.
when you looking for this issue in GitHub you can see some Discussions about it - I think that there is something on library and not something in your code.
have you check the styles.css in devtool ?
inspect => sources

Reactstrap Card component throws error

The issue is with the reactstrap cards: https://reactstrap.github.io/components/card/
Using reactstrap components like Card, etc is not working.
Component: Version I
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output: *It works fine without any errors.
But when I try to use the rest of the components from reactstrap. It throws errors on console.
Component: Version II
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output:
package.json
{
"name": "client",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.17.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-transition-group": "^2.2.1",
"reactstrap": "^4.8.0",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
I am not able to debug this issue. Please help! TIA.
The components such as CardBody, etc are not available in v4.8.0.
Upgrading to latest release (reactstrap v5.0.0-alpha.4) resolves this issue!
npm install --save reactstrap#5.0.0-alpha.4
Refer to the issue that I created on reactstrap#github for more details:
https://github.com/reactstrap/reactstrap/issues/730
This looks like a typo here:
renderMovies() {
return _.map(this.props.movies, movie => {
Missing )
Try
_.map(this.props.movies, movie) => {
If that doesn't do it, put console.log() after everything to see where it becomes undefined.
This type of error usually results from something not being exported correctly or something being null/undefined due to data missing, etc.
This is a good opportunity for me to recommend using ES Lint, so you can gain extra help 24/7 from the passive display of errors. Check it out if you aren't using it. It's absolutely worth looking into and using.
I won't recommend any specific linting configs in here. That is out of scope of this help. ES Lint will underline code errors such as the missing ) with a red underline, so you will experience less of this kind of thing :)

Resources