Skip to content

fonts property on DefaulTheme @react-navigation/native version ^7Β #4540

@ccontreras-ilissolutions

Description

Current behaviour

This adaptation doesnt work

import {
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
import {adaptNavigationTheme} from 'react-native-paper';
import {NavigationTheme} from 'react-native-paper/lib/typescript/types';

const {LightTheme, DarkTheme} = adaptNavigationTheme({
  reactNavigationLight: NavigationDefaultTheme,
  reactNavigationDark: NavigationDarkTheme,
});

interface IThemeState {
  isDark: boolean;
  theme: NavigationTheme;
  toggleLightTheme: () => void;
  toggleDarkTheme: () => void;
}

its because actually the New Interface DefaultTheme/LightTheme from react-navigation/native use a propertie font that NavigationTheme from react native papers doesnt have

Interface DefaultTheme from react-navigation/native

import type { Theme } from '../types';
import type { fonts } from '../fonts';


const DefaultTheme: Theme = {
  dark: false,
  colors: {
    primary: 'rgb(0, 122, 255)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(216, 216, 216)',
    notification: 'rgb(255, 59, 48)',
  },
 font,
};
export default DefaultTheme;

type NavigationTheme from react-native-paper/lib/typescript/types

export type NavigationTheme = {
  dark: boolean;
  colors: {
    primary: string;
    background: string;
    card: string;
    text: string;
    border: string;
    notification: string;
  };
};

Expected behaviour

How to reproduce?

Preview

What have you tried so far?

Your Environment

software version
ios x
android x
react-native 0.76.1
react-native-paper x.x.x
node x.x.x
npm or yarn x.x.x
expo sdk x.x.x

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions