I'm using compose desktop 1.2.0 using Kotlin 1.7.20,
When I use alert dialog I get only a small alert dialog that shrinks the text inside.
I've tried that minimal code:
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
#OptIn(ExperimentalMaterialApi::class)
fun main() = singleWindowApplication {
val text by remember { mutableStateOf("Hello, World!") }
var alertDialog by remember { mutableStateOf(false) }
MaterialTheme {
Button(onClick = {
alertDialog = true
}) {
Text(text)
}
if (alertDialog)
AlertDialog(onDismissRequest = {
alertDialog = false
},
title = { Text("About me") },
text = {
Text("Blah Blah Blah Blah")
},
confirmButton = {
Column {
TabRowDefaults.Divider(thickness = 1.dp)
Button(modifier = Modifier.fillMaxWidth(),
onClick = { alertDialog = false }) {
Text("OK")
}
}
}
)
}
}
I expect a larger alert that fits the content inside.
I've tried that minimal code:
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
#OptIn(ExperimentalMaterialApi::class)
fun main() = singleWindowApplication {
val text by remember { mutableStateOf("Hello, World!") }
var alertDialog by remember { mutableStateOf(false) }
MaterialTheme {
Button(onClick = {
alertDialog = true
}) {
Text(text)
}
if (alertDialog)
AlertDialog(onDismissRequest = {
alertDialog = false
},
title = { Text("About me") },
text = {
Text("Blah Blah Blah Blah")
},
confirmButton = {
Column {
TabRowDefaults.Divider(thickness = 1.dp)
Button(modifier = Modifier.fillMaxWidth(),
onClick = { alertDialog = false }) {
Text("OK")
}
}
}
)
}
}
I expect a larger alert that fits the content inside.
Related
I am running my application on an android device. So I am using Context API, the song is in context, whenever a user clicks on a song it is updated in context and every component gets it and then useEffect of PlayerWidget gets triggered and that time my app is crashing. At the Start of the app, the song is null.
import React, { useEffect, useState, useContext } from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import tailwind from "tailwind-rn";
import { AntDesign, FontAwesome, Foundation } from "#expo/vector-icons";
import { Audio } from "expo-av";
import { Sound } from "expo-av/build/Audio/Sound";
import { AppContext } from "../AppContext";
function PlayerWidget() {
const { song } = useContext(AppContext);
useEffect(() => {
if (song) {
console.log("player", song);
console.log("a");
playCurrentSong();
}
}, [song]);
//const navigation = useNavigation();
const [sound, setSound] = (useState < Sound) | (null > null);
const [isPlaying, setIsPlaying] = useState < boolean > false;
const [duration, setDuration] = (useState < number) | (null > null);
const [position, setPosition] = (useState < number) | (null > null);
/* useEffect(() => {
playCurrentSong();
}, []);
*/
const playBackStatusUpdate = (status: any) => {
setPosition(status.positionMillis);
setDuration(status.durationMillis);
};
const playCurrentSong = async () => {
if (!song) return;
if (sound) {
console.log(sound);
await sound.unloadAsync();
}
const { sound: newSound } = await Audio.Sound.createAsync(
{ uri: song.songUri },
{ shouldPlay: isPlaying },
playBackStatusUpdate
);
setSound(newSound);
setIsPlaying(true);
};
const onPlayPausePress = async () => {
if (!sound) {
return;
}
console.log(sound);
if (isPlaying) {
await sound.pauseAsync();
setIsPlaying(false);
} else {
await sound.playAsync();
setIsPlaying(true);
}
};
if (song === null) {
return null;
}
}
export default PlayerWidget;
Can you tell me what I am doing wrong?
I trying to compare an hour in react native, pasting some parameters; like a : current time, begin time an end time to open a mode screen, below is the follow code:
import React, { Component } from 'react';
import moment from "moment";
import SplashScreen from './Components/SplashScreen.js';
import Intro from './Components/Menu.js';
import Intro2 from './Components/Menu2.js';
export default class Index extends Component {
state = {
ready: false,
};
componentDidMount() {
var that = this;
setTimeout(() => {
this.setState({ ready: true });
}, 3500);
var currentD = new Date();
var startIntroHourD = new Date();
startIntroHourD.setHours(13,30,0); // 5.30 pm
var endIntroHourD = new Date();
endIntroHourD.setHours(5,30,0); // 5.30 am
}
render() {
if (this.state.currentD >= this.state.startIntroHourD && this.state.currentD <this.state.endIntroHourD ){
if (this.state.ready === false) {
return <SplashScreen />;
}
return <Intro/>;
}else{
if (this.state.ready === false) {
return <SplashScreen />;
}
return <Intro2/>;
}
}
}
But this parameters are not working, someone can help me to put the correct follow format time?
This section of code is not running it always return en error saying undefined or not a function in the render function().
Heading
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
Dimensions,
BackHandler,
PropTypes,
Component,
} from 'react-native';
import NavigationExperimental from 'react-native-deprecated-custom-
components';
var _navigator;
//var Navipanel=require('./App/Navigation/Navipanel.js');
var Dashboard= require('./App/Dashboard/dashboard.js');
//var Sample= require('./App/Navigation/sample.js');
var Matches = require('./App/Components/Matches.js');
var Users = require('./App/Components/Users.js');
var SCREEN_WIDTH =require('Dimensions').get('window').width;
var BaseConfig=NavigationExperimental.Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop,
{
snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});
BackHandler.addEventListener('hardwareBackPress', () => {
if (_navigator.getCurrentRoutes().length === 1) {
return false;
}
_navigator.pop();
return true;
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
// A very tighly wound spring will make this transition fast
springTension: 100,
springFriction: 1,
// Use our custom gesture defined above
gestures: {
pop: CustomLeftToRightGesture,
}
});
//var createReactElement = require('create-react-element');
var createReactClass = require('create-react-class');
var test = createReactClass({
_renderScene(route,navigator) {
_navigator = navigator;
if (route.id === 1) {
return <Dashboard navigator={navigator}/>;
}
else if(route.id === 2) {
return <Sample navigator={navigator} /> ;
}
else if(route.id === 3) {
return <Navipanel navigator={navigator} /> ;
}
else if(route.id === 4){
return <Matches navigator={navigator} /> ;
}
else if(route.id === 5) {
return <Users navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render:function() {
return (
<NavigationExperimental.Navigator [//error in this line]
initialRoute = {{id:1}}
renderScene = {this._renderScene}
configureScene = {this._configureScene} />
);
}
});
Undefined error _reactNative.default.createElement
You imported React from "react-native";
import React, {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
Dimensions,
BackHandler,
PropTypes,
Component,
} from 'react-native';
instead of this, you need to import React from "react";
import React from 'react';
When we use JSX in our render functions, in the background JSX runs React.createElement(...). And in your code, React is not defined. Because of this, it gives that error.
I am trying inject a store to my React Component however I am getting the following error:
Undefined is not a function (evaluating 'decorator(target,property,desc)')
In my App.js I have:
import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import MeasurementsStore from './app/Stores/MeasurementsStore';
export default class PoolApp extends Component {
render() {
return (
<PoolComponent store="MeasurementsStore"/>
);
}
}
In my PoolComponent.js
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { AppRegistry, Text, View, TextInput , Picker, Button} from 'react-native';
#observer
export default class PoolComponent extends Component {
saveItems() {
console.log('Pressed save');
}
render() {
const store = this.props.store;
return (
<View>
<Text>Selecteer Pool</Text>
<Picker>
<Picker.Item label="Big" value="big"/>
<Picker.Item label="Small" value="small"/>
</Picker>
<Text>PH</Text>
<TextInput/>
<Text>Totaal Chloor</Text>
<TextInput/>
<Text>Vrij Chloor</Text>
<TextInput/>
<Button
title="Learn More"
color="#841584"
accessibilityLabel="Opslaan"
onPress={this.saveItems}
/>
</View>
);
}
}
And in MeasurementsStore.js I have
import {observable, action, computed} from 'mobx-react';
export default class MeasurementsStore {
#observable phValue = 0;
#observable freeChlorine = 0;
#observable totalChlorine = 0;
#observable totalAlkalinity = 0;
#action data(data: Object) {
if (data.phValue) {
this.phValue = data.phValue;
}
if (data.freeChlorine) {
this.freeChlorine = data.freeChlorine;
}
if (data.totalChlorine) {
this.totalChlorine = data.totalChlorine;
}
if (data.totalAlkalinity) {
this.totalAlkalinity = data.totalAlkalinity;
}
}
}
You don't need inject in this case. You are passing the store directly to your PoolComponent, so there is no need for it. You need to change a few things however:
Pass the actual store, not just the store name as a string, in App.js:
import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import measurementsStore from './app/Stores/MeasurementsStore';
export default class PoolApp extends Component {
render() {
return (
<PoolComponent store={measurementsStore}/>
);
}
Import from mobx and export an instance of MeasurementsStore in MeasurementsStore.js:
import {observable, action, computed} from 'mobx';
class MeasurementsStore {
#observable phValue = 0;
#observable freeChlorine = 0;
#observable totalChlorine = 0;
#observable totalAlkalinity = 0;
#action data(data: Object) {
if (data.phValue) {
this.phValue = data.phValue;
}
if (data.freeChlorine) {
this.freeChlorine = data.freeChlorine;
}
if (data.totalChlorine) {
this.totalChlorine = data.totalChlorine;
}
if (data.totalAlkalinity) {
this.totalAlkalinity = data.totalAlkalinity;
}
}
}
const measurementsStore = new MeasurementsStore();
export default measurementsStore;
I'm coding a simple app, and I want to store the user info on the device, and include them in a POST request without keep asking the user for them. So I thought: "let's save them on the device!".
I've managed to store them, but when I retrieve them, I just can't figure how to JSONparse it back to a dict.
Here's what I get when I call the AsyncStorage.getItem:
I/ReactNativeJS(31854): ## STORAGE - Data retrieved: [object Object]
And when I try to pass that through JSONparse, I get "JSON Parse error: Unexpected identifier 'undefined'"
Here's my code:
storage.js:
import React, { Component } from 'react';
import {
AsyncStorage,
} from 'react-native';
module.exports = {
save: function(key, data){
//console.log(save key:${key} data:${data} stringify:${JSON.stringify(data)});
try {
AsyncStorage.setItem(key, JSON.stringify(data));
//console.log(Storage.save() key => value, ${key} => ${JSON.stringify(data)});
return true;
} catch(err) {
//console.log(save: ERROR ${err});
return false;
}
},
read: async function(key) {
//console.log(reading key:${key});
try {
var data = await AsyncStorage.getItem(key);
if (data !== null){
//console.log("Storage.read(): " + typeof(JSON.parse(data)) + ":" + JSON.parse(data));
return JSON.parse(data);
}else {
//console.log("Storage.read(): Not found");
return false;
}
} catch (err) {
//console.log('Storage.read(): error: ' + err.message);
return false;
}
},
empty: function(key){
try {
AsyncStorage.setItem(key, '');
//console.log(Storage.empty: cleaning key ${key});
return true;
} catch(err) {
//console.log(Storage.empty: ERROR ${err});
return false;
}
}
}
index.android.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
TouchableHighlight,
Alert,
Image,
AsyncStorage,
TextInput,
} from 'react-native';
import { Container, Button, Text } from 'native-base';
import BackgroundImage from './background.js'
var storage = require('./storage.js');
var form_style = require('./formstylesheet.js');
var t = require('tcomb-form-native');
var Form = t.form.Form;
var Person = t.struct({
Nombre: t.String,
Apellido: t.String,
Celular: t.String,
Lote: t.String,
});
var options = {
stylesheet: form_style
};
class UserInfo extends Component {
onPress() {
var value = this.refs.form.getValue();
storage.save('username', JSON.stringify(value.Nombre));
var data = storage.read('username');
}
render() {
return (
<Image source={require('./images/background.jpg')} style={styles.image_container}>
<View style={styles.input_container}>
<Form
ref="form"
type={Person}
options={options}
/>
<TouchableHighlight style={styles.save_button} onPress={this.onPress.bind(this)} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Guardar</Text>
</TouchableHighlight>
</View>
</Image>
)
}
}
Not sure if everything needed to solve the problem is in here. Please let me know if I'm missing something, or there's more snippets needed.
Thanks in advance!