Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: Error: Variant titleLarge was not provided properly. Valid variants are regular, medium, light, thin. #4589

Open
ACDC5 opened this issue Dec 30, 2024 · 5 comments
Labels

Comments

@ACDC5
Copy link

ACDC5 commented Dec 30, 2024

Current behaviour

After yarn react-native run-android is run, the following error occurs:
Image

Preview

index.js

import { AppRegistry } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import App from './App';
....
export default function Main() {
    return (
        <PaperProvider theme={appTheme}>
            <App />
        </PaperProvider>
    );
}
AppRegistry.registerComponent(appName, () => Main)

App.js

import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Appbar, Text, useTheme } from 'react-native-paper';
...
const createStyles = (theme) => StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        backgroundColor: theme.colors.background,
    },
});

const App = () => {
    const theme = useTheme();

    const styles = createStyles(theme);

    const [klineData, setKlineData] = useState([]);
    ...
    useEffect(() => {
        const fetchKlineData = async () => {
            try {
                const response = await api.get('/lines', {
                });
                setKlineData(response);
            } catch (error) {
                setError(error);
            }
        };

        fetchKlineData();
    }, []);

    const handleTitlePress = () => { };

    return (
        <View style={styles.container}>
            <Appbar.Header >
                <TouchableOpacity onPress={handleTitlePress}>
                    <Appbar.Content title={tradingPair} />
                </TouchableOpacity>
            </Appbar.Header>
            <Text style={{ color: theme.colors.primary }}>show data</Text>
        </View>
    );
};
export default App

My attempt

I tried changing the <Appbar.Content title={tradingPair} /> in app.js to the following:
<Appbar.Content title={tradingPair} titleVariant="'titleMedium'" />
But the error still exists

Environment

software version
OS windows 11
ios x
android 9
react-native 0.76.5
react-native-paper ^5.12.5
node v18.20.5
yarn 1.22.22
expo sdk x.
@ACDC5 ACDC5 added the bug label Dec 30, 2024
@uros808
Copy link

uros808 commented Jan 3, 2025

Hi, did you manage to fix this? Having the same issue with custom fonts

@ACDC5
Copy link
Author

ACDC5 commented Jan 7, 2025

Hi, did you manage to fix this? Having the same issue with custom fonts

The problem still exists; I'm focusing on the logic code now and will follow up on this UI issue later

@hxzrx
Copy link

hxzrx commented Jan 9, 2025

I met the same problem and fixed according to #4573.

@uros808
Copy link

uros808 commented Jan 9, 2025

Nothing helped from the linked issue. Downgrading to 5.12.3 helped, it works ok now

@hxzrx
Copy link

hxzrx commented Jan 10, 2025

Nothing helped from the linked issue. Downgrading to 5.12.3 helped, it works ok now

That's a good news.

I firstly found that there's some problem with MD3 theme, and finally, I spread fonts of my theme according to what that link listed, that works for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants