React Native Expo App Missing Status Bar in TestFlight - ios

After building the standalone iOS native binary using Expo, uploading to Testflight and running it on an iPhone, the status bar looks like there are many elements missing.
What might be the cause of this? How can we fix it? Thanks!
In iPhone Expo Client:
Status bar looks normal.
In TestFlight:
Status bar appears to be empty except for the green battery indicator
/src/Routes/index.js
import React from 'react';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, withStyles } from 'react-native-ui-kitten';
...
class BottomNavigationTabsComponent extends React.Component {
render() { ... }
}
BottomNavigationTabs = withStyles(BottomNavigationTabsComponent, (theme) => ({
bottomNavigation: {
borderTopColor: theme['border-basic-color-2'],
borderTopWidth: 1
}
}));
const TabNavigator = createBottomTabNavigator(
{
Foo: FooScreen,
Bar: BarScree,
}, {
initialRouteName: 'Foo',
tabBarComponent: BottomNavigationTabs,
tabBarOptions: {
indicatorStyle: {
height: 0 // remove indicator
}
}
}
)
const AuthStack = createStackNavigator({
Login: LoginScreen,
Baz: BazScreen,
}, {
headerMode: 'none',
})
const RootNavigator = createSwitchNavigator({
Main: TabNavigator,
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
}, {
initialRouteName: 'AuthLoading'
})
const AppContainer = createAppContainer(RootNavigator);
export default AppContainer
/src/App.js
import React, { Component } from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
import ApplicationLoader from './ApplicationLoader'
import AppContainer from './Routes';
export class App extends Component {
render() {
return (
<ApplicationLoader assets={assets}>
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<AppContainer/>
</ApplicationProvider>
</ApplicationLoader>
)
}
}
export default App
app.json
{
"expo": {
"name": "FooBar",
"slug": "foo-bar",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#000"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.foo.bar"
},
"android": {
"package": "com.foo.bar"
}
}
}

Related

Reactnative IOS pushotification/PushNotificationIOS onNotification does not called directly when notification received

I used reactnative PushNotification/PushNotificationIOS modules , My issue is when notification received on foreground to my device IOS ,the function onNotification: function(notification) {} does not called directly is called by click only .
I want to fetch data notification paylaod sent via pububnub console directly without any user interaction ,this function is working fine in android but ios not all.
the console does not show anything can help me to solve this issue and thanks.
This the function and imports module:
import PushNotification from "react-native-push-notification";
import PushNotificationIOS from "#react-native-community/push-notification-ios";
onNotification: function(notification) {
if (Platform.OS=='ios')
{
console.log('notif',notification)
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
onAction: function (notification) {
},
onRegistrationError: function(err) {
},
permissions: {
alert: true,
badge: true,
sound: true,
},
popInitialNotification: true,
requestPermissions: true,
senderID: FIREBASE_SENDER_ID,
})
}
and this the object pubnub to send :
{"pn_apns":{
"aps":{
"alert": {
"body": "Course disponible",
"title": "My course"
},
"sound": "beep.wav",
"data": { "reference": "ND1004332", "startstation": "" }
},
"pn_push":[
{
"push_type":"alert",
"auth_method":"token",
"targets":[
{
"environment":"development",
"topic":"com.test.fr"
}
],
"version":"v2"
}
]
}
}
import {Platform} from 'react-native';
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from "#react-native-community/push-notification-ios";
if (Platform.OS === 'ios') {
// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
onNotification: function (notification) {
console.log("NOTIFICATION:", notification);
const { foreground, userInteraction, title, message } = notification;
if (foreground && (title || message) && !userInteraction) PushNotification.localNotification(notification);
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
permissions: {
// alert: true,
// badge: true,
sound: true
},
});
}

No such file or directory, when using Vite and Antd Pro Layout

No such file or directory, when using Vite and Antd Pro Layout
This is file vite.config.ts:
import { defineConfig } from 'vite';
import reactRefresh from '#vitejs/plugin-react-refresh';
import path from 'path';
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => {
return `antd/lib/${name}/style/index.less`;
},
},
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...{
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
},
},
},
},
resolve: {
alias: [
{
find: /^~/,
replacement: path.resolve(__dirname, 'src'),
},
],
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
});
This is my config to using antd, antd-pro-layout with vite.
But I received the error:
[vite] Internal server error: ENOENT: no such file or directory, open
'/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less'
Can someone help me to fix it?
I had some problems when using React + Antd in Vite.
Thanks for #theprimone for the answer. But the answer is incomplete. I will complete the answer here.
First time, add additional config to Less Preprocessor:
Add this config to your vite.config.js file:
{
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}
Second, setting module aliases to fix Less #import problem:
Again, add the following config into your vite.config.js file:
{
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
}
Last, install vite-plugin-imp plugin to solve Antd ES problem:
Install the vite-plugin-imp dependencies:
pnpm add -D vite-plugin-imp
# or
npm i -D vite-plugin-imp
then, setup the plugin in your vite.config.js file:
{
plugins: [
// React plugin here
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
];
}
The final configuration in vite.config.js file will look like this:
import { defineConfig } from "vite";
import reactRefresh from '#vitejs/plugin-react-refresh';
import vitePluginImp from "vite-plugin-imp";
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
});
Also work with #preact/preset-vite.
Ref:
https://github.com/theprimone/vite-react
https://github.com/ant-design/ant-design/issues/7850
https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
Try to import antd styles like this:
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
More usage of Vite + React + Ant Design or other UI Library, this repo theprimone/vite-react might give you more or less inspiration.

navigation Prop is missing for this navigator 3

The navigation Prop is missing for this navigator. In react-navigation 3 you must set up your navigation more directly. I took a look at the documentation regarding this but I'm still having trouble figuring out how I will implement this into my code. What is it that I am doing wrong and how would I fix it. Please provide some assistance.
This is my RootStack.js
import React from 'react';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import SignInScreen from './App/screens/SignInScreen';
import Account from './App/screens/Account';
import Inventory from './App/screens/Inventory';
import Settings from './App/screens/Settings';
import SignUp from './App/screens/SignUp';
import ForgotScreen from './App/screens/ForgotScreen';
import Tournament from './App/screens/Tournament';
import TournamentRsvp from './App/screens/TournamentRsvp';
import Shop from './App/screens/Shop';
import Game from './App/screens/Game';
const routes = {
SignInScreen: {
screen: SignInScreen
},
Account: {
screen: Account
},
Tournament: {
screen: Tournament
},
TournamentRsvp: {
screen: TournamentRsvp
},
Shop: {
screen: Shop
},
Game: {
screen: Game
},
SignUp: {
screen: SignUp
},
ForgotScreen: {
screen: ForgotScreen
},
Settings: {
screen: Settings
},
Inventory: {
screen: Inventory
}
};
class AuthLoadingScreen extends React.Component {
constructor() {
super();
}
}
const AppStack = createStackNavigator(routes, {
headerMode: 'none',
navigationOptions: {
headerVisible: false
},
initialRouteName: 'SignInScreen'
});
const AuthStack = createStackNavigator(
{
SignInScreen: {
screen: SignInScreen
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false
}
}
);
export default createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
);
This is my App.js below
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import * as firebase from 'firebase';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { firebaseConfig } from './config.js';
import RootStack from './RootStack';
firebase.initializeApp(firebaseConfig);
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<RootStack />
</View>
);
}
}
Try to wrap in createAppContainer.
import { createAppContainer, createStackNavigator } from 'react-navigation';
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
));

Not able to render windbarb Highchart in angular

I am trying to plot wind barb using my angular application. I used angular-highchart package but it's showing me below error -
Error: Highcharts error #17: www.highcharts.com/errors/17
import { Component } from '#angular/core';
import { Chart } from 'angular-highcharts';
import { MapChart } from 'angular-highcharts';
#Component({
selector: 'app-root',
template: `
<div [chart]="chart"></div>
`
})
export class AppComponent {
chart = new Chart({
title : { text : 'simple chart' },
xAxis: {
type: 'datetime',
offset: 40
},
series: [{
type: 'windbarb',
name:"Wind Direction",
data: [
[9.8, 177.9],
[10.1, 177.2]
]
}, {
type: 'area',
name:'WindSpeed',
data: [
[9.8, 177.9],
[10.1, 177.2]
],
}]
});
constructor() {
}
}
here
Check module.ts imports as per angular-highcharts docs
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src';
import windbarb from 'highcharts/modules/windbarb.src';
export function highchartsModules() {
// apply Highcharts Modules to this array
return [ exporting,windbarb ];
}
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule,ChartModule ],
declarations: [ AppComponent, HelloComponent ],
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Stackblitz demo

Can't bind to 'options' since it isn't a known property of 'chart'

I have created a chart module using Angular2-highcharts but when I try to run the application I am getting the followoing error.
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'chart'. ("
<!-- <p text-center>Kye Info Page under construction</p> -->
<chart [ERROR ->][options]="chartOptions" type="chart"></chart>
</ion-content>
"): ng:///KeyinfoPageModule/KeyinfoPage.html#27:9
'chart' is not a known element:
1. If 'chart' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
<ion-content>
Code
1. app.module.ts
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'Highcharts';
imports: [
---------
ChartModule.forRoot(highcharts)
],
2. html File
<ion-content>
<chart [options]="chartOptions" type="chart"></chart>
</ion-content>
3. .ts file
export class KeyinfoPage {
chartOptions:any;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
this.chartOptions={chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
}
console.log('ionViewDidLoad KeyinfoPage');
}
viewDashboard(){
this.navCtrl.setRoot('DashboardPage')
}
}
Please help me to solve this issue. I have found several questions like this but none of them helped me to solve this error. I am following this video to create the charts
https://www.youtube.com/watch?v=FSg8n5_uaWs&index=2&list=LLTJRcsGtG-ZMAf9dklVIikA&t=610s
keyinfo.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { KeyinfoPage } from './keyinfo';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
#NgModule({
declarations: [
KeyinfoPage,
],
imports: [
IonicPageModule.forChild(KeyinfoPage),
ChartModule
],
})
export class KeyinfoPageModule {}
You can set import the HighChartsModule in the IonicPageModule in which it is used instead of the app.module.ts
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
#NgModule({
declarations: [
KeyinfoPage,
],
imports: [
IonicPageModule.forChild(KeyinfoPage),
ChartModule.forRoot(highcharts)
],
})
export class KeyinfoPageModule {}

Resources