Giter Club home page Giter Club logo

ionic-react-conference-app's Introduction

Ionic React Conference Application

This application is purely a kitchen-sink demo of the Ionic Framework and React.

There is not an actual Ionic Conference at this time. This project is just to show off Ionic components in a real-world application.

Angular and Vue versions

We've built versions of this Conference app in Angular and Vue for developers that would prefer to use one of those framework options:

https://github.com/ionic-team/ionic-conference-app

https://github.com/ionic-team/ionic-vue-conference-app

Table of Contents

Getting Started

  • Download the installer for Node LTS.
  • Install the ionic CLI globally: npm install -g ionic
  • Clone this repository: git clone https://github.com/ionic-team/ionic-react-conference-app.git.
  • Run npm install from the project root.
  • Run ionic serve in a terminal from the project root.
  • Profit. 🎉

App Preview

Material Design iOS
Android Menu iOS Menu
Material Design iOS
Android Schedule iOS Schedule
Material Design iOS
Android Speakers iOS Speakers
Material Design iOS
Android Speaker Detail iOS Speaker Detail
Material Design iOS
Android About iOS About

ionic-react-conference-app's People

Contributors

adamdbradley avatar amandaejohnston avatar brandyscarney avatar elylucas avatar jgw96 avatar jthoms1 avatar liamdebeasi avatar mapsandapps avatar mlynch avatar rdlabo avatar sean-perkins avatar tylerslater-io avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic-react-conference-app's Issues

Issues with iOS swipe back gesture

Hi there, great work on this demo.

On iOS, when swiping back to return to the previous page, the Ionic back animation fires while you are still dragging back, causing multiple animations to perform at once. This is a native feature of iOS Safari so it should be disabled through Ionic or React Router.

Failed to compile

Failed to compile
./src/pages/SessionDetail.tsx
Attempted import error: 'IonBackButtonNav' is not exported from '@ionic/react'.

Cannot find module '@ionic/react'

For some weird reasons, it keeps saying Cannot find module '@ionic/react even when I installed the package via npm i @ionic/react.

Doesn't work on Android

I've followed the readme for building on Android and all I get on my device (7.0) or an emulator (8.0) is a blank screen. I've included the errors that are in the logcat.

2019-03-31 13:21:08.091 24432-24432/io.ionic.starter E/Capacitor: Unable to read file at path public/plugins
2019-03-31 13:21:08.196 1421-1840/? E/SurfaceFlinger: ro.sf.lcd_density must be defined as a build property
2019-03-31 13:21:08.342 1421-1441/? E/SurfaceFlinger: ro.sf.lcd_density must be defined as a build property
2019-03-31 13:21:08.680 24432-24520/io.ionic.starter E/chromium: [ERROR:gl_surface_egl.cc(289)] eglChooseConfig failed with error EGL_SUCCESS
2019-03-31 13:21:09.350 24432-24485/io.ionic.starter E/Capacitor: Unable to open asset URL: http://localhost/%PUBLIC_URL%/assets/icon/icon.png
2019-03-31 13:21:09.352 24432-24483/io.ionic.starter E/Capacitor: Unable to open asset URL: http://localhost/%PUBLIC_URL%/assets/icon/icon.png
2019-03-31 13:21:09.357 24432-24483/io.ionic.starter E/Capacitor: Unable to open asset URL: http://localhost/%PUBLIC_URL%/assets/icon/icon.png
2019-03-31 13:21:18.884 1798-1814/system_process E/memtrack: Couldn't load memtrack module
2019-03-31 13:21:18.903 1798-1814/system_process E/memtrack: Couldn't load memtrack module

Has anyone been able to run the latest version with the instructions in readme?

I posted an issue a 4 months ago (still the last opened issue) and have not received any response to it. I am wondering if anyone ever actually tried to run the latest version as described in readme successfully? I have a project that is pretty much stuck (for months now) as I can't build this project. I have been able to run it by using npm run start for development. But can't do anything else ecause ionic serve etc do not work

Error on node-sass dependency

After cloning this repo and run "npm install":

[email protected] install C:\Work\MGMClub\App\Ionic\MGMReact2\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-83_binding.node":

HTTP error 404 Not Found

Environment


Ionic:

Ionic CLI : 6.13.1 (C:\Users\ricar\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/react 5.3.1

Capacitor:

Capacitor CLI : 1.3.0
@capacitor/core : 1.3.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.12
OS : Windows 10

Src > theme.css file seems to be an unwanted file

There is a similar file under src > theme > variables.css which covers everything src > theme.css contains. ionic serve also doesn't looks for changes made to theme.css file. So I think it is safe to remove theme.css file from the repo.

ios swipe back not working

Hi
swipe back is not working in ios. the back button in toolbar works well but please make it available on swiping back

Switching dark mode on and off - animating the color change

Currently when switching dark mode on and off the visible components switch colors at slightly different times.
As an improvement it would be nice if the color change between dark/light was animated and therefore visually synchronized among all components.

security: found 984 vulnerabilities (63 low, 8 moderate, 913 high)

Capture630

Microsoft Windows [Version 10.0.17763.557]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\ae\ionic-react-conference-app>npm i
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1750 packages from 780 contributors and audited 35781 packages in 196.15s
found 984 vulnerabilities (63 low, 8 moderate, 913 high)
  run `npm audit fix` to fix them, or `npm audit` for details

C:\ae\ionic-react-conference-app>

Missing files

const dataUrl = '/assets/data/data.json';
const locationsUrl = '/assets/data/locations.json';

Update to Capacitor 4

At the moment the app uses capacitor 1.3.0, should be updated to use Capacitor 4.x

ionic cap add android: Could not resolve dependency: peer @capacitor/core@"^4.0.0" from @capacitor/[email protected]

Hi i want to do the android build but has this error when type: ionic cap add android. Any advise?

PS C:\Users\Guti0\Desktop\ionic-react-conference-app-master> ionic cap add android

capacitor.cmd add android
[capacitor] [error] npm ERR! code ERESOLVE
[capacitor] npm ERR! ERESOLVE unable to resolve dependency tree
[capacitor] npm ERR!
[capacitor] npm ERR! While resolving: [email protected]
[capacitor] npm ERR! Found: @capacitor/[email protected]
[capacitor] npm ERR! node_modules/@capacitor/core
[capacitor] npm ERR! @capacitor/core@"1.3.0" from the root project
[capacitor] npm ERR!
[capacitor] npm ERR! Could not resolve dependency:
[capacitor] npm ERR! peer @capacitor/core@"^4.0.0" from @capacitor/[email protected]
[capacitor] npm ERR! node_modules/@capacitor/android
[capacitor] npm ERR! @capacitor/android@"*" from the root project
[capacitor] npm ERR!
[capacitor] npm ERR! Fix the upstream dependency conflict, or retry
[capacitor] npm ERR! this command with --force, or --legacy-peer-deps
[capacitor] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[capacitor] npm ERR! See C:\Users\Guti0\AppData\Local\npm-cache\eresolve-report.txt for a full report.
[capacitor] npm ERR! A complete log of this run can be found in:
[capacitor] npm ERR! C:\Users\Guti0\AppData\Local\npm-cache_logs\2022-08-25T16_46_57_230Z-debug-0.log
[capacitor]
[ERROR] An error occurred while running subprocess capacitor.

    capacitor.cmd add android exited with exit code 1.

Demo site issues: images not displaying, mobile issues

Hey hey --

Just wanted to report a few bugs for you:

  • The Ionic image isn't showing up on Account or Support (see image below)
  • Clicking on logout shows a fully blank screen on the right
  • if you narrow down the screen after clicking on logout, it just shows that blank screen (no navigation)
  • Tutorial is a blank/unclickable section (that seems intentional 😀)

Hipe this is useful! ☺️

Code repitition

Currently I'm trying to structure a React Ionic app and am struggling so was looking to this as a reference.
Why is this bit of code repeated for loads of components? Obviously you want it on all those pages, but shouldn't it just be rendered for all routes so you don't have to keep repeating it? <IonHeader> <IonToolbar> <IonButtons slot="start"> <IonMenuButton></IonMenuButton> </IonButtons> <IonTitle>Login</IonTitle> </IonToolbar> </IonHeader>

Navigation flickering

Just tried this demo app and noticed there is some flickering when navigating:

  • Flickering when switching tabs. There is a suggested fix for this here. I will publish a PR with the suggested fix. PR submitted
screen-20220114-074429_3.mp4
  • Flickering when opening and closing details view. I can't tell if this is caused by not following best practice or if this is an actual bug in Ionic React.
screen-20220114-074841_2.mp4

x0.1 speed:

fast_slow_1642147437206.mp4

Add test examples

This project has been really helpful, thank you. Would you be able to add an example of how to unit test a react component that uses the @ionic/react library?

I've tried using jest and enzyme and I'm getting compile issues that I'm not sure on how to fix.

Router breaking after tab change

Info

This is an issue running on iOS. When you change the tab then go back to schedule, swiping back causes a blank screen to appear (the Schedule component isn't rendered). Tested on the latest version from ionic start

Steps to reproduce

  • Run the app in iOS mode in your browser or on iOS device / Simulator
  • Navigate to a tab other than Schedule
  • Click on Schedule
  • Swipe from the left to go "back"

Still buggy?

Hi Guys,
is it me or is the app still somewhat buggy?

I cannot seem to be able to access the Account, Support or logout pages or Login for that matter.
The tutorial Button is also inactive.

I'd like to start using react with ionic, and this boilerplate in particular, I just want to make sure this is an option though.

Thanks for the hard work

How to compile it using ionic cli ?

Hi,

Nice project!
Compiled successfully with npm, but I was wondering if it can be compiled with ionic cli (build for android/ios).
(I will play with it a little bit and will update).

Thanks.

More detailed environment specs

Hello everyone!. Thank you for this development as it is great to learn from and has also been a great base for projects for two years.
Unfortunately, today I am having a lot of trouble finding the most favorable environment to run after clean clone. Is there an option to have a more limited range of "engines" to find a better match of correct dependencies? (for example, on the same package.json)

"engine": {
"node": ">=12.x.x <=16.x.x",
"npm": ">=6.0.0"
},

  • With the help of NVM I have tried with all versions of NODE that I could between 14 and 18 LTS. But most commonly v16.17.1

  • I have tested on Macbook M1, Pop! OS (kind of ubuntu), Windows 10, Windows 11, Docker.......

  • It also seems that the TypeScript version ~3.8.0 is wrong or something, giving me all kinds of errors.

  • I have tried updating npm uninstall g typescript && npm install typescript@latest (and oposite)

  • After install axios (over clean clone working at the begining):

Captura desde 2022-10-06 21-43-53

  • Sometimes is asking me for a sass or node-sass but never sems to run correctly since that.

  • I've tried ionic repair process, handclean and then npm install (here slightly works!), npm audit fix --force", npm install --peer-dependencies, of course I did an ionic build every time etc.

  • I have tried updating npm uninstall typescript && npm install -g typescript@latest (and oposite)

  • I have tested on Macbook M1, Pop! OS (kind of ubuntu), Windows 10, Windows 11, Docker.......

Any effort to keep me from going through 38 issue resolutions to achieve something so immediate with getting the mockup working and for example being able to install npm install axios and have the app continue to work (since I'm struggling with even the most basic of things)

Maybe I'm facing a common cause related with the TypeScript "restart after some time" projects. Maybe I must learn somewhing new but common for this scenario... Yes please!!

Thanks for understanding!

Path alias is not working

I have specified the following in my ts.config file

 "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"]
    },
    "moduleResolution": "node",

The IDE does not complain when i import the module like so import Tab2 from '~/pages/Tab2'.

However, i am receiving the following error when trying to compile

ERROR in ./src/App.tsx 11:0-32
Module not found: Error: Can't resolve '@/pages/Tab2' in 'ui-kampung\src'
resolve '@/pages/Tab2' in 'ui-kampung\src'
  Parsed request is a module
  using description file: ui-kampung\package.json (relative path: ./src) 
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      ui-kampung\src\node_modules doesn't exist or is not a directory
      looking for modules in ui-kampung\node_modules
        ui-kampung\node_modules\@\pages doesn't exist

TypeScript 3.9

I tried to upgrade to get some esnext features, but there seem to be some breaking changes. I think https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#type-parameters-that-extend-any-no-longer-act-as-any . Getting errors with combineReducers.ts in various places and About.tsx with setPopoverEvent(e.nativeEvent);

9.chunk.js:113347 src/data/combineReducers.ts
TypeScript error in src/data/combineReducers.ts(3,47):
Type 'R[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'R[keyof R]' is not assignable to type '(...args: any) => any'.
    Type 'R[string] | R[number] | R[symbol]' is not assignable to type '(...args: any) => any'.
      Type 'R[string]' is not assignable to type '(...args: any) => any'.  TS2344

    1 | export function combineReducers<R extends any>(reducers: R) {
    2 |   type keys = keyof typeof reducers;
  > 3 |   type returnType = { [K in keys]: ReturnType<typeof reducers[K]> }
      |                                               ^
    4 |   const combinedReducer = (state: any, action: any) => {
    5 |     const newState: returnType = {} as any;
    6 |     const keys = Object.keys(reducers);
console.<computed> @ 9.chunk.js:113347
9.chunk.js:113347 src/data/combineReducers.ts
TypeScript error in src/data/combineReducers.ts(6,30):
No overload matches this call.
  Overload 1 of 2, '(o: {}): string[]', gave the following error.
    Argument of type 'R' is not assignable to parameter of type '{}'.
      Type 'unknown' is not assignable to type '{}'.
  Overload 2 of 2, '(o: object): string[]', gave the following error.
    Argument of type 'R' is not assignable to parameter of type 'object'.
      Type 'unknown' is not assignable to type 'object'.  TS2769

    4 |   const combinedReducer = (state: any, action: any) => {
    5 |     const newState: returnType = {} as any;
  > 6 |     const keys = Object.keys(reducers);
      |                              ^
    7 |     keys.forEach(key => {
    8 |       const result = reducers[key](state[key], action);
    9 |       newState[key as keys] = result || state[key];
console.<computed> @ 9.chunk.js:113347
9.chunk.js:113347 src/data/combineReducers.ts
TypeScript error in src/data/combineReducers.ts(8,22):
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'unknown'.
  No index signature with a parameter of type 'string' was found on type 'unknown'.  TS7053

     6 |     const keys = Object.keys(reducers);
     7 |     keys.forEach(key => {
  >  8 |       const result = reducers[key](state[key], action);
       |                      ^
     9 |       newState[key as keys] = result || state[key];
    10 |     });
    11 |     return newState;
console.<computed> @ 9.chunk.js:113347
9.chunk.js:113347 src/pages/About.tsx
TypeScript error in src/pages/About.tsx(15,21):
Argument of type 'MouseEvent' is not assignable to parameter of type 'SetStateAction<undefined>'.
  Type 'MouseEvent' provides no match for the signature '(prevState: undefined): undefined'.  TS2345

    13 | 
    14 |   const presentPopover = (e: React.MouseEvent) => {
  > 15 |     setPopoverEvent(e.nativeEvent);
       |                     ^
    16 |     setShowPopover(true);
    17 |   };
    18 |   const conferenceDate = '2047-05-17';

Ionic 6

Since Ionic 6.0 RC is out I wondering when we will have this upgrade? do you guys have any plan for this? hopefully in near future?

Cheers,
Sid

Please update to typescript 5

It would be great to upgrade from TypeScript 4 to TypeScript 5. I'm trying to use this repo to test a library that requires TypeScript 5, and it doesn't work because the library requires TypeScript 5, which this repo doesn't support.

Dispatch action not working.

I am trying to signup using an API and have modified the singup page as below;
signup.tsx

const login = async (e: React.FormEvent) => { e.preventDefault(); setFormSubmitted(true); if(!firstName) { setUsernameError(true); } if(!password) { setPasswordError(true); } if(username && password) { //await setIsLoggedIn(true); //await setUsernameAction(username); await userRegister(firstName, lastName, email, phone, password, gender); history.push('/', {direction: 'none'}); } };

user.actions.ts

`export const userRegister = (firstName: string, lastName: string, email: string, phone: string, password: string, gender: string) => async (dispatch: React.Dispatch) => {

dispatch(setLoading(true));
const user = await setUserRegisterData(firstName, lastName, email, phone, password, gender);
console.log(user);
dispatch(setIsLoggedIn(true));
dispatch(setUsername(user.email));
dispatch(setUserRegisterAction(user));
dispatch(setLoading(false));

};

export const setUsername = (username?: string) => async () => {
console.log(new Date().toString());
await setUsernameData(username);
return ({
type: 'set-username',
username
} as const);
};
`

the console is showing user but no other dispatch function showing the log and working.

Is there any solution?

How to get ios modal effect

I want to know how to add ios efect modal like filter modal
in the documentation of modal are not explain
localhost_8100_tabs_schedule(iPhone X)

show Close App Dialog on main page

Hi. Please implement a Close App Dialog that appears on back button when user is on some main pages, like Schedule, Speakers. It's may?

'--isolatedModules' flag + @ionic/core = no no

On master commit c0d5dfdb931ee0cbf1eaedfcfbb7411dbcb82692 (currently latest) when clean installing node packages and starting the app, TypeScript throws the following error:

/ionic-react-conference-app/node_modules/@ionic/core/dist/types/components/nav/view-controller.d.ts
Type error: Ambient const enums are not allowed when the '--isolatedModules' flag is provided.  TS1209

    1 | import { ComponentProps, FrameworkDelegate } from '../../interface';
  > 2 | export declare const enum ViewState {
      |                           ^
    3 |     New = 1,
    4 |     Attached = 2,
    5 |     Destroyed = 3

This happens after a clean install and start using TypeScript 3.1.6 (as defined in the package.json) on node 10.13.0 and npm 6.4.1.

Is this something that you recognize?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.